World Congress 2024 • Aug 20, 2024 • Session details

Common Mistakes in Vue.js and How to Avoid Them

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 · World Congress 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 · World Congress 2025

1:28 min

Introduction to the speaker and frontend projects

Abdelrahman Awad

Abdelrahman Awad · World Congress 2025

3:05 min

Server rendered component revival and cyclical software trends

James Seconde · World Congress 2023

More from World Congress 2024

Beyond the Hype: Real-World AI Strategies Panel thumbnail

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

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

about 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

about 2 years ago

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

Sue Quackenbush

Dapr in Practice thumbnail

about 2 years ago

Dapr in Practice

marcklefter

Minimising the Carbon Footprint of Workloads thumbnail

about 2 years ago

Minimising the Carbon Footprint of Workloads

Michael Mueller

Upcoming sessions on this topic

World Congress 2026 North America

September 25, 2026 · 11:00–11:30

Stage 7

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

Shubham Chaurasia

Senior Software Engineer at Meta

Shubham Chaurasia

World Congress 2026 North America

September 24, 2026 · 12:50–13:20

Stage 7

Architecting Agentic Apps: WebMCP, A2UI, and Agent Experience

Ankita Sood

Sr. Principal Engineer @ Secureworks | Angular GDE

Ankita Sood

World Congress 2026 North America

September 24, 2026 · 14:50–15:20

Stage 9

How to generate business value through performance optimizations

Nikolai Sidiropulo

Software Engineer at Meta

Nikolai Sidiropulo

World Congress 2026 North America

September 24, 2026 · 14:10–14:40

Stage 9

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

Bartosz Leczycki, Paweł Matynia

Bartosz Leczycki

Paweł Matynia

World Congress 2026 North America

September 25, 2026 · 10:20–10:50

Stage 9

Testing React Backends Like a Pro: Mocking Databases with SQLite

David Morris

Solution Architect at Leidos

David Morris

World Congress 2026 North America

September 24, 2026 · 16:10–16:40

Outdoor Stage

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

World Congress 2021 • about 5 years ago

Under The Hood of Vue 3 Reactivity

Marc Backes

Under The Hood Of Vue 3 Reactivity thumbnail

LIVE • over 3 years ago

Under The Hood Of Vue 3 Reactivity

Marc Backes

Bringing back reactivity in "reactive" frontend thumbnail

World Congress 2024 • about 2 years ago

Bringing back reactivity in "reactive" frontend

Michał Moroz

Lessons learned from building a thriving Vue.js SaaS application thumbnail

World Congress 2025 • about 1 year ago

Lessons learned from building a thriving Vue.js SaaS application

Abdelrahman Awad

Vuejs and TypeScript- Working Together like Peanut Butter and Jelly thumbnail

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

World Congress 2024 • about 2 years ago

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

Daniel Espino Garcia

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

11 months ago

HTML elements mocked up with their code

LM

Luis Minvielle

The Best JavaScript Framework to Learn

When the Greek mastermind Heraclitus, millennia ago, claimed that “the only constant is change,” he certainly pepped up Star Wars creator George Lucas to perpetually re-do shots crucial to the cano...

over 3 years ago

The Best JavaScript Framework to Learn

DC

Daniel Cranney

How to Avoid Over-Engineering

In today’s software development world, the demand for designing applications that are both robust and easy to maintain is more pressing than ever. Many developers encounter the architectural chaos ...

over 1 year ago

A series of code blocks with 'X's on showing they are incorrect, with one CSS block shown as the correct answer.

BB

Benedikt Bischof

Web Development Best Practices: What The Data Tells us

Welcome to the new issue of the WeAreDevelopers Live Talk series. This article recaps an interesting talk by Laurie Voss who gave advice about the best practices in web development. What you will l...

over 4 years ago

Web Development Best Practices: What The Data Tells us

From learning to earning

Jobs that call for the skills explored in this talk.

Senior Software Engineer, Angular

Barcelona, Spain

Remote Backend Caching ReactJS

24 days ago • Verified

Founding Engineer (Front End)

San Francisco, United States

Expert $180k–220k React Next.js JavaScript

about 1 month ago

Senior Software Engineer, React (Investing & Trading)

Remote Next.js ReactJS Caching

about 2 months ago

Senior Software Engineer, React (Websites & Martech)

Remote Next.js ReactJS Backend

Frontend Engineer

Berlin, Germany

Expert €80k–140k NestJS ReactJS TypeScript

about 1 month ago

Senior Software Engineer, Frontend

TeamViewer Germany GmbH,

Austin, TX, United States

Expert Vue.js ReactJS Graphql