Vue.jsは使いやすいフロントエンドフレームワークですが、時に「何これ！？」と思わず5回は唱えたくなるような謎エラーに悩まされることがあります。
この記事では、Vueでありがちなエラーを厳選して、原因→解決法→ついでに防止策までサクッと解説します。
目次
🧨 1. Avoid mutating a prop directly
全文例：
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders.原因
親コンポーネントから渡されたpropを子コンポーネント内で直接変更しようとしている場合に発生。
// NGパターン
props: ['message'],
created() {
this.message = '変えちゃうよ'; // ❌ これがアウト
}
解決策
dataでコピーして変更するか、emitで親に変更を依頼する。
props: ['message'],
data() {
return {
localMessage: this.message
}
}
🧨 2. Property or method “xxx” is not defined
全文例：
[Vue warn]: Property or method "user" is not defined on the instance but referenced during render.
原因
テンプレート内で定義していない変数やメソッドを参照している。
<template>
<p>{{ user.name }}</p> <!-- userが未定義 -->
</template>
<script>
export default {
data() {
return {
profile: { name: 'Taro' }
}
}
}
</script>解決策
使用している変数・メソッドがdataやcomputed、methodsに存在するか確認。
🧨 3. Cannot read property ‘xxx’ of undefined
全文例：
TypeError: Cannot read property 'name' of undefined原因
オブジェクトがまだ読み込まれていないのに、内部のプロパティへアクセスしてしまう。
解決策
オプショナルチェイニング(?.)や条件分岐で安全にアクセス。
<p>{{ user?.name }}</p>
<!-- または -->
<p v-if="user">{{ user.name }}</p>🧨 4. v-model が効かない！？
症状：
双方向バインディングしてるはずなのに、フォームが更新されない。
原因
v-modelとバインドしている変数が正しく定義されていない。- コンポーネントで
modelValueが使われていない（Vue 3の場合）。
解決策（Vue 3コンポーネント内の場合）
// 子コンポーネント
props: ['modelValue'],
emits: ['update:modelValue'],
methods: {
updateValue(val) {
this.$emit('update:modelValue', val)
}
}🧨 5. setup()の中でthisを使って怒られる
全文例：
Uncaught TypeError: Cannot read properties of undefined (reading '$emit')原因
Composition API（setup()）ではthisは使えない。オブジェクト構文とは文脈が違うため。
解決策
代わりにsetup()の引数を使ってアクセス。
setup(props, { emit }) {
const handleClick = () => {
emit('click')
}
return { handleClick }
}📘 まとめ
Vueのエラーは英語で出てきて一見わかりづらいですが、「何をしてはいけないのか」「どうすればVueが期待する書き方になるのか」を理解すれば、だんだん自然と読めるようになります。
次にエラーが出たときは、落ち着いて5回唱えてみましょう。
「このエラー、なぜ出るの？」
