Daniel Kelly

Common Mistakes in Vue.js and How to Avoid Them

A common mistake with `reactive()` creates a 'false sense of security' in your app. Learn why Vue expert Daniel Kelly recommends using `ref` as your default.

Common Mistakes in Vue.js and How to Avoid Them
#1about 1 minute

Why learning from common mistakes is practical

Making small mistakes can lead to big headaches, so learning from others' errors is a practical way to improve your own code.

#2about 9 minutes

Avoid using the index as a key in v-for loops

Using an array index as a key in `v-for` can cause unpredictable rendering bugs when the array order changes and child components have their own state.

#3about 5 minutes

Do not rely on non-reactive browser APIs

Computed properties and watchers will not update when depending on non-reactive browser APIs like localStorage or DOM element properties; use libraries like VueUse for reactive wrappers.

#4about 5 minutes

Prefer ref over reactive to avoid breaking reactivity

Reassigning a variable declared with `reactive()` breaks its reactivity, so it's recommended to use `ref()` instead for all data types to prevent subtle bugs.

#5about 6 minutes

Avoid mutating props directly in child components

Directly mutating props, including properties of object props, violates one-way data flow and can be solved by using `defineModel` for `v-model` or cloning the prop into local state.

#6about 2 minutes

Learn more with a free course and certification

A free View School course covers these mistakes and more, including prop drilling and cleaning up event listeners, and a certification is available to validate your skills.

Related jobs
Jobs that call for the skills explored in this talk.

Remote

Name of

Name of

Remote
Intermediate
PHP
Java
+1

Matching moments

Navigating state management patterns and their trade-offs
07:48 MIN

Navigating state management patterns and their trade-offs

Lessons learned from building a thriving Vue.js SaaS application

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Exploring the core technologies behind Vue 3 reactivity
02:13 MIN

Exploring the core technologies behind Vue 3 reactivity

Under The Hood of Vue 3 Reactivity

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Q&A on framework comparisons and advanced concepts
13:26 MIN

Q&A on framework comparisons and advanced concepts

Securing Frontend Applications with Trusted Types

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Understanding the core principles of reactivity
02:59 MIN

Understanding the core principles of reactivity

Under The Hood Of Vue 3 Reactivity

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Reframing common complaints about JavaScript development
10:23 MIN

Reframing common complaints about JavaScript development

How to Stop Choosing JavaScript Frameworks and Start Living

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Answering questions on reactivity and browser support
04:19 MIN

Answering questions on reactivity and browser support

Under The Hood of Vue 3 Reactivity

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Deciding when to use or avoid TypeScript in Vue
01:38 MIN

Deciding when to use or avoid TypeScript in Vue

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.
Introduction to JavaScript design patterns
04:32 MIN

Introduction to JavaScript design patterns

10 must-know design patterns for JS Devs

Unlock Moments
Create a free account to watch a limited number of Moments each month.
Upgrade to PRO for unlimited access to the full archive.

Featured Partners

Related Videos

See all videos
Under The Hood of Vue 3 Reactivity49:00

Under The Hood of Vue 3 Reactivity

Marc Backes

Under The Hood Of Vue 3 Reactivity54:44

Under The Hood Of Vue 3 Reactivity

Marc Backes

Lessons learned from building a thriving Vue.js SaaS application30:02

Lessons learned from building a thriving Vue.js SaaS application

Abdelrahman Awad

What the heck do "declarative" and "reactive" actually mean?30:40

What the heck do "declarative" and "reactive" actually mean?

André Kovac

petite-vue - Progressively enhancing every application?44:40

petite-vue - Progressively enhancing every application?

Alexander Lichter

Learning From My Side Project Mistakes15:28

Learning From My Side Project Mistakes

Jonathan Fielding

Bringing back reactivity in "reactive" frontend28:43

Bringing back reactivity in "reactive" frontend

Michał Moroz

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly44:31

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly

Rob Richardson

Related Articles

View all articles
CH
Chris Heilmann
Dev Digest 136 - No JS(on) of mine
News and ArticlesDouglas Crockford is our featured video, so let's talk about evolving JavaScript and all things JSON. Judicious JSON explains all the weird things in it, you can learn why it can be incredibly slow, people wonder what even is a JSON ...
Dev Digest 136 - No JS(on) of mine
LM
Luis Minvielle
The Best 7 Frontend Frameworks for Developers in 2025
Which frontend frameworks should developers focus on in 2025? We’re listing them for you and showing advantages and drawbacks. You’ll notice we included some libraries as well, because you can’t miss those in 2025.What is the best front end framework...
The Best 7 Frontend Frameworks for Developers in 2025
CH
Chris Heilmann
All the videos of Halfstack London 2024!
Last month was Halfstack London, a conference about the web, JavaScript and half a dozen other things. We were there to deliver a talk, but also to record all the sessions and we're happy to share them with you. It took a bit as we had to wait for th...
All the videos of Halfstack London 2024!
DC
Daniel Cranney
The State of HTML 2024: What can we learn from it?
The results of the State of HTML 2024 survey are in! Though the name suggests it’s HTML-only, the survey focuses on the web platform in a more general sense, giving us some fascinating insights into not only the state of the web, but also some sense ...
The State of HTML 2024: What can we learn from it?

From learning to earning

Jobs that call for the skills explored in this talk.