Fixing “Cannot read properties of undefined (reading ‘value’)” in Vue

If you’ve ever seen this error in a Vue 3 app, you’re not along.

Uncaught TypeError: Cannot read properties of undefined (reading 'value')

This error is one of the most common and frustrating errors developers run into when working with the Composition API — especially with ref() or reactive data.

In this post, we’ll break down:

• ✅ What causes this error
• 🔍 How to track it down
• 🛠️ 4 common solutions
• 💡 Tips to avoid it in the future

What Does the Error Actually Mean?

This error comes from trying to access .value on something that… well, isn’t defined. It’s a really a simple JavaScript native error.

In Vue 3’s Composition API, reactive data declared with ref() or computed() must be accessed with .value inside JavaScript logic:

const count = ref(0)
console.log(count.value)

But if count is undefined for any reason, doing count.value will throw the error.

Most Common Scenarios That Cause It

1. Ref is not initialized yet

let inputRef

onMounted(() => {
  inputRef.value.focus() // ❌ Cannot read 'value' of undefined
})

Fix:

const inputRef = ref(null) // ✅ Always initialize refs

onMounted(() => {
  inputRef.value?.focus()
})

2. Forgetting to ref() something

const count = 0;
console.log(count.value) // ❌ Cannot read 'value' of undefined

Fix:

const count = ref(0) // ✅ Use ref()

3. Accessing .value inside the template

Vue handles .value for you in templates — no need to write it!

<p>{{ count.value }}</p> <!-- ❌ -->
<p>{{ count }}</p>       <!-- ✅ -->

4. Accessing a .value before data is ready

If you’re using ref() to hold an async response:

const user = ref()

onMounted(async () => {
  const data = await fetchUser()
  user.value = data
})

console.log(user.value.name) // ❌ Cannot read 'name' of undefined

Fix: Check before accessing

if (user.value) {
  console.log(user.value.name)
}

Or use optional chaining:

console.log(user.value?.name)

Tools to Help

Besides knowing what to look out for, the following tools will help keep you on your toes.

• Vue Language Tools (for VSCode) will often warn you when you forget .value or use it in templates
• TypeScript is your friend here — if you're using ref(), make sure to type your variables:

const user = ref<User | null>(null)

Recap: How to Avoid This Error

• Always initialize your refs (e.g., ref(null))
• Don’t forget to use ref() or reactive()
• In JavaScript/TypeScript, use .value
• In templates, do not use .value
• Guard your access when dealing with async data

Want more Vue dev tips like this? Checkout out our premium courses! They are full of helpful debugging tips and advice for creating Vue.js apps.