[Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime Vue Origin: On your device OSI layer 7 · Application Last updated 5 Nov 2026

Vue 2: [Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option

In Vue 2 you added a property to the root data (or instance) after creation, which can't be made reactive.

Exact message you may see [Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.Avoid adding reactive properties to a Vue instance or its root $data at runtime[Vue warn]: Avoid adding reactive properties to a Vue instance or its root $dataVue.set cannot set reactive property on undefined, null, or primitive value
Explore the map of this error Full error map →
Seen on: Vue

Meaning

Declare every top-level property in data() upfront (even as null), or use Vue.set(this.obj, "key", value)/this.$set for nested additions. Vue 3 (Proxy reactivity) removed these limitations — consider migrating.

Common causes

  • this.newProp = ... not declared in data
  • Adding keys to this.$data
  • Vue 2 reactivity caveats (new object properties, array index set)
  • Misuse of $set on root
  • Migrating from Vue 3 habits

⚡ Quick fix

  1. Declare in data() upfront (initialise null)
  2. this.$set(this.user, "age", 30) for nested objects
  3. Use splice for array changes in Vue 2

Detailed fix by platform

Vue

  1. data() { return { user: { name: "" }, selected: null } }

How to diagnose

  1. Property — Declared?
  2. Nested — $set?
  3. Version — Vue 2?

🔧 Still not fixed?

Many errors look alike. If the steps above didn’t solve it, one of these is probably what you’re facing:

Where this error sits

Origin: On your device. Errors that are often confused with or caused by this one (click to open):

[Vue warn]: Error in v-on handler / Error in mounted hook (Vue 2) — Vue 2: [Vue warn]: Error in v-on handler: "TypeError: Cannot read property 'x' of undefined" (Vue)[Vue warn]: Error in …[Vue warn]: Maximum recursive updates exceeded — Vue: [Vue warn]: Maximum recursive updates exceeded in component <Foo>. This means you have a reactive effect that is mutating its own dependencies and thus recursively triggering itself (Vue)[Vue warn]: Maximum r…[Vue warn]: Set operation on key failed: target is readonly — Vue: [Vue warn]: Set operation on key "name" failed: target is readonly. (Vue)[Vue warn]: Set opera…[Vue warn]: Slot "default" invoked outside of the render function — Vue: [Vue warn]: Slot "default" invoked outside of the render function: this will not track dependencies used in the slot (Vue)[Vue warn]: Slot "def…[Vue warn]: Write operation failed: computed value is readonly — Vue: [Vue warn]: Write operation failed: computed value is readonly (Vue)[Vue warn]: Write ope…Avoid mutating a prop directly — Vue: [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders (Vue)Avoid mutating a prop…Property was accessed during render but is not defined — Vue: [Vue warn]: Property "x" was accessed during render but is not defined on instance (Vue)Property was accessed…[Vue warn…

Explore the map of this error Full error map →

🧠 Still stuck? Analyze your error

Paste the full message, response headers or stack trace — we'll detect the platform and point to the most likely cause.

💬 What worked for others

No tips yet — did something else fix this for you?

Share what worked for you

Tips are checked by an editor before they appear. Links are removed.