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

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

Daniel Kelly
Daniel Kelly
Updated: July 10th 2025

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.

Start learning Vue.js for free

Daniel Kelly
Daniel Kelly
Daniel is the lead instructor at Vue School and enjoys helping other developers reach their full potential. He has 10+ years of developer experience using technologies including Vue.js, Nuxt.js, and Laravel.

Comments

Latest Vue School Articles

Decoding ChatGPT: How It Works and Why It Matters for Developers

Decoding ChatGPT: How It Works and Why It Matters for Developers

Uncover how ChatGPT works with neural nets and why it’s a developer must-have.
Eleftheria Batsou
Eleftheria Batsou
Top 5 Vue CSS Superpowers You Might Be Missing

Top 5 Vue CSS Superpowers You Might Be Missing

Discover 5 powerful styling techniques in Vue 3—from scoped selectors to stunning animations with Tailwind, auto-animate, and @vueuse/motion. Learn how to craft beautiful, reactive UIs with zero bloat.
Daniel Kelly
Daniel Kelly
VueSchool logo

Our goal is to be the number one source of Vue.js knowledge for all skill levels. We offer the knowledge of our industry leaders through awesome video courses for a ridiculously low price.

More than 200.000 users have already joined us. You are welcome too!

Follow us on Social

© All rights reserved. Made with ❤️ by BitterBrains, Inc.