Spot the bug · 3 levels

Bug Hunt

Find the broken line, then pick the fix. Small components with one Vue mistake each: templates, props and events, reactivity and lifecycle. Three hearts per level.

Start level 1

Read the component. A few lines of a real Vue component. One line has a mistake.
Click the line. A wrong click costs a heart and shows a hint. You have 3 hearts per level.
Pick the fix. Three fixes, one right. Then read why, and on to the next bug.

Levels

0 of 3 done · play in order, or jump to any level

```
<template>  <button @click="count++">{{ count.value }}</button></template>
```
Level 1 of 3Template basics
Five small templates, each with one slip that breaks what the page shows.
refs in templates, v-bind, v-for and events5 bugs
Up nextPlay
```
<template>  props.count++</template>
```
Level 2 of 3Props and events
Data flows down and events flow up. Five components that forget one half of that.
one-way props, emits and defineModel5 bugs
Not startedPlay
```
<template>  watch(count.value, (n) => console.log('count is', n))</template>
```
Level 3 of 3Reactivity and lifecycle
Watchers that never fire, state that goes missing and a hook that crashes the mount.
watch sources, state, hooks and computeds5 bugs
Not startedPlay