Property was accessed during render but is not defined 🟩 Vue

Vue: [Vue warn]: Property "x" was accessed during render but is not defined on instance

The template references a variable/function that the component doesn’t expose.

Seen on: Vue

Meaning

In <script setup>, only top-level bindings are available to the template. Variables defined inside functions, typos, or Options API data not returned cause it.

Common causes

  • Typo in the template variable name
  • Variable not declared at top level in <script setup>
  • Options API: missing in data()/computed/methods
  • Not returned from setup()

⚡ Quick fix

  1. Declare the ref/function at the top level of <script setup>
  2. Fix the name
  3. Return it from setup() when not using <script setup>

Detailed fix by platform

Vue

  1. javascript
    <script setup>
import { ref } from "vue";
const count = ref(0);
function increment() { count.value++; }
</script>

How to diagnose

  1. Name — Which property?
  2. Scope — Declared at top level?

🔧 Still not fixed?

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

🧠 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.