Javascript is required
1 min read

Vue Tip: Debug Watcher

Vue Tip: Debug Watcher Image

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  },
11watchEffect(callback, {
12  onTrack(e) {
13    debugger
14  },
15  onTrigger(e) {
16    debugger
17  },

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.


onTrack and onTrigger watcher options only work in development mode.

If you liked this Vue tip, follow me on X to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter:

I will never share any of your personal data. You can unsubscribe at any time.