Watching Data with watch

Vue allows you to run code in response to changes in reactive data using the watch() function.

A watcher observes a value and executes a function when that value changes.

<script setup>
import { ref, watch } from "vue";

const count = ref(0);

watch(count, (newValue, oldValue) => {
  console.log("Count changed from", oldValue, "to", newValue);
});
</script>

<template>
  <button @click="count++">Increase</button>
</template>

Each time the value changes, the watcher runs and receives the new and previous values.

Watchers are useful when you need to perform side effects, such as logging, API calls, or reacting to changes outside the template.