# 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

**Code:** `[Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime` · **Category:** Vue · **Seen on:** Vue

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

## 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?

---
Source: [WhatIsMyError](https://whatismyerror.com/errors/vue/vue2-warn-avoid-adding-reactive-properties-to-vue-instance)