Watchers

watch vs computed

Computed derives a value. watch runs a callback when something changes—logging, writing to localStorage, or triggering a fetch.

Watch a ref

Import watch and observe a source.

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

const query = ref("");

watch(query, (next, prev) => {
  console.log("query changed", prev, "→", next);
});
</script>

<template>
  <input v-model="query" placeholder="Search" />
</template>

Watch with options

Use immediate to run once on setup, or deep for nested object changes.

watch(
  form,
  (value) => {
    localStorage.setItem("draft", JSON.stringify(value));
  },
  { deep: true },
);

Prefer computed when possible

If you only need a derived display value, computed is clearer and cached. Reach for watch for intentional side effects.