Vue Tip: Debug Watcher

Similar to computed(), watchers also support the onTrack and onTrigger options to debug a watcher's behavior:

<script setup>
watch(source, callback, {
  onTrack(e) {
    debugger
  },
  onTrigger(e) {
    debugger
  },
})

watchEffect(callback, {
  onTrack(e) {
    debugger
  },
  onTrigger(e) {
    debugger
  },
})
</script>

onTrack will be called when a reactive property or ref is tracked as a dependency.

onTrigger will be called when the watcher callback is triggered by the mutation of a dependency.

The callbacks receive a debugger event that contains information about the dependency. If you place a debugger statement inside the callback, you can interactively inspect the dependency.