How to Fix 'Property Not Defined on Instance' Error in Vue

The property not defined on instance error in Vue happens when you try to use a property that Vue does not know about in its reactive system. To fix it, declare the property inside the data() function or define it properly in setup() when using Composition API.

Why This Happens

This error occurs because Vue's reactivity system only tracks properties that are declared in the component's data() or returned from setup(). If you try to access or bind a property that is not declared, Vue cannot find it on the component instance and throws this error.

vue

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      // 'message' is missing here
    };
  }
}
</script>

Output

[Vue warn]: Property or method "message" is not defined on the instance but referenced during render.

The Fix

To fix this, declare the property inside the data() function so Vue can track it reactively. If using Composition API, define and return it from setup(). This makes the property available on the component instance and removes the error.

vue

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue!'
    };
  }
}
</script>

Output

Hello Vue!

Prevention

Always declare all reactive properties you plan to use in your template or methods inside data() or setup(). Use Vue's devtools or linting tools to catch undeclared properties early. This helps avoid runtime errors and keeps your code clear.

Related Errors

Similar errors include:

• "Method not defined on instance": Fix by declaring methods inside the methods option.
• "Computed property not defined": Fix by defining computed properties inside the computed option.

Key Takeaways

Declare all reactive properties inside data() or setup() to avoid this error.

Vue only tracks properties it knows about for reactivity and template rendering.

Use Vue devtools and linters to catch undeclared properties early.

Similar errors happen with methods and computed properties if not declared properly.