Vue Tip: Debug Computed Properties

Michael Hoffmann

@mokkapps

Script Debugging

Vue Tip: Debug Computed Properties Image

We can debug computed properties by passing computed() a second options object with two callbacks:

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.

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 BlueSky to get notified about new tips, blog posts, and more. Alternatively (or additionally), you can subscribe to my weekly Vue & Nuxt newsletter :

Vue Tip: Provide Fallback Content for Slots

Vue Tip: Use Lazy v-model to Sync State After Change Events