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.

Angular Developer

Picnic Technologies B.V.

Picnic Technologies B.V.
Amsterdam, Netherlands

Intermediate
Senior
TypeScript
Angular
+1

Matching moments

Selecting strategic partners and essential event tools
03:17 MIN

Selecting strategic partners and essential event tools

Cat Herding with Lions and Tigers - Christian Heilmann

Using content channels to build an event community
04:49 MIN

Using content channels to build an event community

Cat Herding with Lions and Tigers - Christian Heilmann

Organizing a developer conference for 15,000 attendees
01:32 MIN

Organizing a developer conference for 15,000 attendees

Cat Herding with Lions and Tigers - Christian Heilmann

Establishing a single source of truth for all data
02:39 MIN

Establishing a single source of truth for all data

Cat Herding with Lions and Tigers - Christian Heilmann

Increasing the value of talk recordings post-event
04:57 MIN

Increasing the value of talk recordings post-event

Cat Herding with Lions and Tigers - Christian Heilmann

The industry's focus on frameworks over web fundamentals
11:32 MIN

The industry's focus on frameworks over web fundamentals

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Why HR struggles with technology implementation and adoption
04:22 MIN

Why HR struggles with technology implementation and adoption

What 2025 Taught Us: A Year-End Special with Hung Lee

Balancing the trade-off between efficiency and resilience
03:38 MIN

Balancing the trade-off between efficiency and resilience

What 2025 Taught Us: A Year-End Special with Hung Lee

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

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

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

petite-vue - Progressively enhancing every application?

Alexander Lichter

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

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

André Kovac

10 must-know design patterns for JS Devs28:13

10 must-know design patterns for JS Devs

Erick Wendel

Related Articles

View all articles
BR
Benjamin Ruschin
The HTML Elements That You’re Probably Over-Engineering
As frameworks have become more and more commonplace in the world of web development, so too has the over-engineering of features made possible by our humble old friend, HTML. The mental models that come with using state management in React, Vue and o...
The HTML Elements That You’re Probably Over-Engineering

From learning to earning

Jobs that call for the skills explored in this talk.

VUE Developer

VUE Developer

Elevation Partners
Rotterdam, Netherlands

API
CSS
GIT
D3.js
Vue.js
+6