We can debug computed properties by passing computed() a second options object with two callbacks:
onTrackwill be called when a reactive property or ref is tracked as a dependency.onTriggerwill be called when the watcher callback is triggered by the mutation of a dependency.
Both callbacks will receive debugger events in the same format as component debug hooks:
<script setup>
const count = ref(0)
const plusOne = computed(() => count.value + 1, {
onTrack(e) {
// Triggered when count.value is tracked as a dependency
debugger
},
onTrigger(e) {
// Triggered when count.value is mutated
debugger
},
})
// access plusOne, should trigger onTrack
console.log(plusOne.value)
// mutate count.value, should trigger onTrigger
count.value++
</script>
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:
Vue Tip: Use Lazy v-model to Sync State After Change Events
By default, v-model syncs with the state of the Vue instance on every input event. The .lazy modifier syncs after change events.
Vue Tip: Provide Fallback Content for Slots
There are cases when it's useful to specify fallback (i.e. default) content for a slot, to be rendered only when no content is provided.