WeAreDevelopers Logo WeAreDevelopers
Sign in
For You LIVE
World Congress 2024 β€’ Aug 20, 2024 β€’ Session details

Common Mistakes in Vue.js and How to Avoid Them

danielkellyio

Are silent synchronization bugs breaking your Vue.js components? Stop using loop indices as keys and discover why universally adopting ref() will save your application's reactivity.

Pause
Mute Enter Fullscreen
#1 about 7 min

Using the array index as a list item key

Using array indexes as keys causes bugs when list items change order and nested components contain local state.

#2 about 2 min

Forcing element and component re-renders with keys

The key attribute can force Vue to completely re-render elements or components rather than merely patching them.

#3 about 6 min

Handling non-reactive browser APIs in computed properties

Native browser APIs like local storage cannot trigger reactive updates in computed properties without external utility wrappers.

#4 about 5 min

Breaking reactivity by completely replacing reactive objects

Reassigning an entire array created with the reactive function severs its connection to the underlying reactivity tracking system.

#5 about 9 min

Avoiding the direct mutation of component props

Modifying a prop directly inside a child component causes unintended side effects unless handled safely with defined bindings or cloning.

Matching moments

5:27 min

Core JavaScript structures powering Vue reactivity

Marc Backes Β· WWC 2021

2:59 min

Comparing Vue to React and Angular

Rob Richardson Β· LIVE

2:57 min

Fundamental concepts of Vue 3 reactivity and Observer pattern

Marc Backes Β· LIVE

3:30 min

Structuring and importing predictable, side-effect free composables

Abdelrahman Awad Abdelrahman Awad Β· WWC 2025

1:28 min

Introduction to the speaker and frontend projects

Abdelrahman Awad Abdelrahman Awad Β· WWC 2025

3:05 min

Server rendered component revival and cyclical software trends

James Seconde Β· WWC 2023

More from World Congress 2024

Beyond the Hype: Real-World AI Strategies Panel thumbnail
24:07
10 months ago

Beyond the Hype: Real-World AI Strategies Panel

Mike Butcher, JΓΌrgen MΓΌller, Katrin Lehmann, Tobias Regenfuss

Carl Lapierre - Exploring Advanced Patterns in Retrieval-Augmented Generation thumbnail
21:17
almost 2 years ago

Carl Lapierre - Exploring Advanced Patterns in Retrieval-Augmented Generation

Carl Lapierre

Coding an Immersive Copilot using Unity / .NET and Azure OpenAI! thumbnail
31:50
almost 2 years ago

Coding an Immersive Copilot using Unity / .NET and Azure OpenAI!

Zaid Zaim

Building a diverse tech company: The power of Diversity, Equity, Inclusion, and Belonging thumbnail
29:43
almost 2 years ago

Building a diverse tech company: The power of Diversity, Equity, Inclusion, and Belonging

Sue Quackenbush

Dapr in Practice thumbnail
24:08
almost 2 years ago

Dapr in Practice

marcklefter

Minimising the Carbon Footprint of Workloads thumbnail
27:46
almost 2 years ago

Minimising the Carbon Footprint of Workloads

Michael Mueller

Upcoming sessions on this topic

Open session

World Congress 2026 North America

Beyond Vibe Coding: An AI Builder’s Guide to Migrating 10k+ React Components

Shubham Chaurasia

Senior Software Engineer @ Meta

Shubham Chaurasia
Open session

World Congress 2026 North America

Architecting AI in Angular: WebMCP, A2UI, and the Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood
Open session

World Congress 2026 North America

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo
Open session

World Congress 2026 North America

One Repo, One Strategy: Scalable Full-Stack Testing in a Monorepo World

PaweΕ‚ Matynia, Bartosz Leczycki

PaweΕ‚ Matynia
Bartosz Leczycki
Open session

World Congress 2026 North America

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect

David Morris
Open session

World Congress 2026 North America

When Humans Stop Writing Code: Rethinking Languages, Compilers, and Responsibility

Simon Auer

Organizer of flutter vienna meetup and CEO of marqably

Simon Auer

Related videos

Under The Hood of Vue 3 Reactivity thumbnail
49:00
WWC 2021 β€’ about 5 years ago

Under The Hood of Vue 3 Reactivity

Marc Backes

Under The Hood Of Vue 3 Reactivity thumbnail
54:44
LIVE β€’ over 3 years ago

Under The Hood Of Vue 3 Reactivity

Marc Backes

Bringing back reactivity in "reactive" frontend thumbnail
28:43
WWC 2024 β€’ almost 2 years ago

Bringing back reactivity in "reactive" frontend

MichaΕ‚ Moroz

Lessons learned from building a thriving Vue.js SaaS application thumbnail
30:02
WWC 2025 β€’ 12 months ago

Lessons learned from building a thriving Vue.js SaaS application

Abdelrahman Awad

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly thumbnail
44:31
LIVE β€’ over 5 years ago

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly

Rob Richardson

Dos and don'ts with react hooks. An opinionated approach thumbnail
20:16
WWC 2024 β€’ almost 2 years ago

Dos and don'ts with react hooks. An opinionated approach

Daniel Espino Garcia

Related articles

From learning to earning

Jobs that call for the skills explored in this talk.