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:
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.
let inputRef
onMounted(() => {
inputRef.value.focus() // ❌ Cannot read 'value' of undefined
})
Fix:
const inputRef = ref(null) // ✅ Always initialize refs
onMounted(() => {
inputRef.value?.focus()
})
ref()
somethingconst count = 0;
console.log(count.value) // ❌ Cannot read 'value' of undefined
Fix:
const count = ref(0) // ✅ Use ref()
.value
inside the templateVue handles .value
for you in templates — no need to write it!
<p>{{ count.value }}</p> <!-- ❌ -->
<p>{{ count }}</p> <!-- ✅ -->
.value
before data is readyIf 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)
Besides knowing what to look out for, the following tools will help keep you on your toes.
.value
or use it in templatesref()
, make sure to type your variables:const user = ref<User | null>(null)
ref(null)
)ref()
or reactive()
.value
.value
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.
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!
© All rights reserved. Made with ❤️ by BitterBrains, Inc.