Vue 3’s reactivity system is one of its biggest strengths. It’s also one of the easiest places to introduce subtle, hard-to-debug issues—especially in larger applications.

These aren’t beginner mistakes. These are the kinds of problems that show up in real-world apps after months of development.

1. Destructuring Breaks Reactivity (Silently)

const state = reactive({ count: 0 })
const { count } = state

This breaks reactivity because destructuring removes the proxy connection.

Fix:

const { count } = toRefs(state)

2. Mixing ref and reactive Without a Clear Pattern

Inconsistent usage leads to confusion and bugs.

Recommendation:

• Use ref for primitives
• Use reactive for grouped state
• Stay consistent per module

3. Watching the Wrong Thing

watch(state.count, () => {}) // ❌

Fix:

watch(() => state.count, () => {}) // ✅

4. Deep Reactivity Isn’t Free

Large nested objects increase tracking overhead.

Fix options:

• shallowReactive()
• Normalize data
• Split state

5. Computed Properties Recomputing Too Often

Reassigning arrays triggers unnecessary recomputes.

items.value = [...items.value]

Avoid unless necessary.

6. Reactive Arrays and Identity Issues

Mutation vs replacement matters.

items.value.push(item) // better
items.value = items.value.filter(...) // heavier

7. watchEffect vs watch Misuse

• watchEffect = automatic tracking
• watch = precise control

Use intentionally.

8. Losing Reactivity When Passing Data

Pass refs, not plain values.

function useThing(countRef) {}

9. Template Ref Unwrapping Confusion

Templates unwrap refs automatically, JS does not.

Always assume .value in JS.

10. Debugging Reactivity Is Still Hard

Tips:

• Log inside watchers/computed
• Break up large state
• Verify dependencies

Final Thoughts

Vue reactivity is powerful but requires discipline.

Most issues appear as apps scale—not at the beginning.

Be intentional with how state is structured and accessed.

Feature Image Prompt

Dark developer workspace, glowing Vue logo, floating code snippets (reactive, ref, watch), subtle glitch effect, neon green accents, centered bold text: "Vue Reactivity Gotchas"