Vue.js Reactivity Warnings — Property Not Reactive and Watch Errors
About Vue.js Reactivity Warnings
Fix Vue.js reactivity warnings including properties not being reactive, watch effect errors, and Composition API ref/reactive misuse. This guide covers everything you need to know about this topic, including common causes, step-by-step solutions, and answers to frequently asked questions.
Here are the key things to understand: 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(). Understanding these fundamentals will help you diagnose and resolve this issue more effectively.
The most common reasons this occurs include: 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. Identifying the root cause is the first step toward finding the right solution.
To resolve this, follow these recommended steps: Use ref() for primitive values: const count = ref(0); count.value++. Use reactive() for objects: const state = reactive({ name: 'test', count: 0 }). Avoid destructuring reactive objects: use toRefs() — const { name, count } = toRefs(state). In Vue 2: use Vue.set(object, 'newKey', value) to add reactive properties. Use shallowRef() or shallowReactive() when deep reactivity is not needed for performance. If these steps do not resolve the issue, consider consulting additional resources or a qualified professional.
This article is part of our Browser Errors collection on Error Codes Wiki. We provide comprehensive, up-to-date information to help you find solutions quickly.
Quick Answer
What is the difference between ref and reactive?
ref() wraps any value (primitives or objects) in a reactive wrapper — access with .value. reactive() makes an object reactive without .value but only works with objects, not primitives. ref() is more versatile.
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
- 1Use ref() for primitive values: const count = ref(0); count.value++
- 2Use reactive() for objects: const state = reactive({ name: 'test', count: 0 })
- 3Avoid destructuring reactive objects: use toRefs() — const { name, count } = toRefs(state)
- 4In Vue 2: use Vue.set(object, 'newKey', value) to add reactive properties
- 5Use shallowRef() or shallowReactive() when deep reactivity is not needed for performance