Debug Vue Reactivity

🔧 SKILL ACTIVATED: Debug Vue Reactivity

This skill was activated because you mentioned reactivity issues, components not updating, or Vue state problems.

Instructions

Reactivity Debugging Protocol

When Vue components don't update or state seems broken, follow this systematic approach:

1. Check Reactive References

• Always use .value for ref() in setup()
• Never destructure reactive objects (breaks reactivity)
• Use storeToRefs() for Pinia store destructuring
• Use reactive() for objects, not ref()

2. Computed Properties

• Check dependencies - computed should only track what it uses
• Debug stale computed - add console.log to see when it recalculates
• Use watchEffect() for automatic dependency tracking

3. Watcher Configuration

• Use { deep: true } for nested object changes
• Use { immediate: true } to run watcher immediately
• Check flush: 'post' for timing issues

Quick Debug Patterns

Reactivity Checker

const debugReactivity = (ref, name) => {
  console.log(`${name} initial:`, ref.value)

  const stopWatcher = watch(ref, (newVal, oldVal) => {
    console.log(`${name} changed:`, oldVal, '→', newVal)
  }, { immediate: true })

  return stopWatcher
}

Component Update Tracker

export default {
  setup() {
    onRenderTracked((e) => {
      console.log('Render tracked:', e.key, e.type)
    })

    onRenderTriggered((e) => {
      console.log('Render triggered:', e.key, e.type)
    })
  }
}

🎯 Activation Triggers

This skill activates when you mention:

• "components won't update"
• "reactivity issues"
• "computed not working"
• "watcher not firing"
• "UI not updating"
• "state seems broken"
• "Vue reactivity problems"

🔗 Related Skills

• Fix Pinia State: If this is a store synchronization issue
• Optimize Performance: If this is a performance-related reactivity problem

📊 Usage Context

Skill usage will be tracked for analytics and improvement purposes

This skill provides systematic debugging approaches for Vue.js reactivity issues in the PomoFlow application.