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.

#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.