Vue.js Reactivity Warnings — Property Not Reactive and Watch Errors

Overview

Fix Vue.js reactivity warnings including properties not being reactive, watch effect errors, and Composition API ref/reactive misuse.

Key Details

• Vue.js reactivity system tracks dependencies and automatically updates the DOM when reactive data changes
• Vue 3 Composition API uses ref() for primitives and reactive() for objects
• Adding new properties to a reactive object after creation may not be tracked in Vue 2 (use Vue.set())
• Destructuring reactive objects breaks reactivity — use toRefs() to maintain reactivity
• Computed properties must return a value — side effects should go in watch() or watchEffect()

Common Causes

• Adding new properties to a reactive object without Vue.set() (Vue 2) or proper reactivity setup
• Destructuring a reactive() object, breaking the Proxy-based reactivity
• Mutating a ref value without using .value (ref.value = newValue)
• Using reactive() for primitive values — ref() is required for primitives

Steps

1. 1Use ref() for primitive values: const count = ref(0); count.value++
2. 2Use reactive() for objects: const state = reactive({ name: 'test', count: 0 })
3. 3Avoid destructuring reactive objects: use toRefs() — const { name, count } = toRefs(state)
4. 4In Vue 2: use Vue.set(object, 'newKey', value) to add reactive properties
5. 5Use shallowRef() or shallowReactive() when deep reactivity is not needed for performance

Tags

More in Web Development

Frequently Asked Questions