Watchers in Vue.js
From the Vue.js cheat sheet · Computed Properties & Watchers · verified Jul 2026
Watchers
Reacting to data changes with side effects
vue
<!-- Vue 3 Composition API -->
<script setup>
import { ref, watch, watchEffect } from 'vue'
const count = ref(0)
// Watch single ref
watch(count, (newVal, oldVal) => {
console.log(`Count changed: ${oldVal} -> ${newVal}`)
})
// watchEffect runs immediately
watchEffect(() => {
console.log(`Count is: ${count.value}`)
})
</script>💡 watchEffect runs immediately, watch runs only on change
⚡ Use deep: true to watch nested object changes
📌 watchEffect auto-tracks dependencies, watch is explicit
🔥 Return value from watch/watchEffect stops the watcher