阅读中文版本

Vue Property Was Accessed but Not Defined on Instance

Fix "Property was accessed during render but is not defined on instance" by declaring data, props, or refs before use and checking template names.

npm run dev 2>&1 | grep "not defined on instance"

grep -n "return {\|data()\|defineProps" src/components/*.vue

Symptoms

This guide profiles the failure behind “Vue Property Was Accessed but Not Defined on Instance”. It walks through the observable symptoms, a reproducible diagnosis path, the underlying root cause, the concrete fix, and how to verify the change and prevent a regression.

Observed symptoms include:

• Vue warns “Property “x” was accessed during render but is not defined on instance”
• A template variable renders as undefined
• The warning appeared after renaming a data field

Reproduce and Diagnose

Reproduce the failure in isolation before changing any code. Work through the checks below in order; each one narrows the search space.

Step 1: Read the property name from the warning

npm run dev 2>&1 | grep "not defined on instance"

The warning names the exact missing key, which you can then trace in the component.

Step 2: Verify the declaration

grep -n "return {\|data()\|defineProps" src/components/*.vue

Confirming that setup returns the ref or that data/props declares it resolves the warning.

Likely contributors, in order of frequency:

• The template references a name absent from data, props, setup, or methods
• A setup ref is used in the template without being returned
• A typo or case mismatch between template and script names

Root Cause

Vue resolves template names against the component instance after merging data, props, setup bindings, and methods. A name present in none of those surfaces is undefined during render and triggers this warning.

The Fix

Declare the value where it belongs: add it to data, declare a prop, or return the setup ref/computed; then fix any name or case mismatch with the template.

Watch out: Declaring an unused value to silence the warning adds noise; remove genuinely dead template references instead.

<script setup>
import { ref, computed } from 'vue';
const count = ref(0);          // returned automatically in <script setup>
const doubled = computed(() => count.value * 2);
</script>

<template>
  <p>{{ count }} -> {{ doubled }}</p> <!-- must exist on the instance -->
</template>

Verify and Prevent

Reload the component and confirm the value renders and the warning is gone; run vue-tsc to catch template type mismatches.

Once verified, add a regression test that reproduces the original symptom so the failure cannot silently return.

This class of failure is usually environmental rather than pure logic, so capture the exact command, the environment variables, and the working directory in your bug report. Reproduce it in the smallest possible script, then widen the scope only once the minimal case is understood. A short written checklist for this failure mode saves hours the next time it appears.