Vue Tip: Debug Watcher

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

1<script setup>
2watch(source, callback, {
3  onTrack(e) {
4    debugger
5  },
6  onTrigger(e) {
7    debugger
8  },
9})
10
11watchEffect(callback, {
12  onTrack(e) {
13    debugger
14  },
15  onTrigger(e) {
16    debugger
17  },
18})
19</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.