---
title: "Bug Hunt · vuejs.school"
description: "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."
canonical_url: "https://vuejs.school/games/bug-hunt"
meta:
  "og:description": "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."
  "og:image": "https://vuejs.school/_og/d/a_~QnVnIEh1bnQgwrcgdnVlanMuc2Nob29s%2Cc_OgCard.takumi%2Ctitle_Bug%2BHunt%2Cdescription_~RmluZCB0aGUgYnJva2VuIGxpbmUsIHRoZW4gcGljayB0aGUgZml4Lg%2Ceyebrow_~R2FtZXMgwrcgU3BvdCB0aGUgYnVn%2Ctint_peach%2Cp_Ii9nYW1lcy9idWctaHVudCI%2Cs_NY-zbQ2-dlbrP298.png"
  "og:image:alt": "Bug Hunt · vuejs.school"
  "og:image:height": "600"
  "og:image:type": image/png
  "og:image:width": "1200"
  "og:title": "Bug Hunt · vuejs.school"
  "twitter:image": "https://vuejs.school/_og/d/a_~QnVnIEh1bnQgwrcgdnVlanMuc2Nob29s%2Cc_OgCard.takumi%2Ctitle_Bug%2BHunt%2Cdescription_~RmluZCB0aGUgYnJva2VuIGxpbmUsIHRoZW4gcGljayB0aGUgZml4Lg%2Ceyebrow_~R2FtZXMgwrcgU3BvdCB0aGUgYnVn%2Ctint_peach%2Cp_Ii9nYW1lcy9idWctaHVudCI%2Cs_NY-zbQ2-dlbrP298.png"
  "twitter:image:alt": "Bug Hunt · vuejs.school"
---

> Index of every page on this site: [llms.txt](https://vuejs.school/llms.txt)

**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**](https://vuejs.school/games/bug-hunt/1)

1. **1****Read the component.** A few lines of a real Vue component. One line has a mistake.
2. **2****Click the line.** A wrong click costs a heart and shows a hint. You have 3 hearts per level.
3. **3****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 3****Template basics**

  Five small templates, each with one slip that breaks what the page shows.**refs in templates, v-bind, v-for and events****5 bugs**Up next**Play** Play: Level 1, Template basics, teaches refs in templates, v-bind, v-for and events, up next](https://vuejs.school/games/bug-hunt/1)
- [

  ```
  <template>  props.count++</template>
  ```

  **Level 2 of 3****Props and events**

  Data flows down and events flow up. Five components that forget one half of that.**one-way props, emits and defineModel****5 bugs**Not started**Play** Play: Level 2, Props and events, teaches one-way props, emits and defineModel, not started](https://vuejs.school/games/bug-hunt/2)
- [

  ```
  <template>  watch(count.value, (n) => console.log('count is', n))</template>
  ```

  **Level 3 of 3****Reactivity and lifecycle**

  Watchers that never fire, state that goes missing and a hook that crashes the mount.**watch sources, state, hooks and computeds****5 bugs**Not started**Play** Play: Level 3, Reactivity and lifecycle, teaches watch sources, state, hooks and computeds, not started](https://vuejs.school/games/bug-hunt/3)

```json
{"@context":"https://schema.org","@graph":[{"@id":"https://vuejs.school/#website","@type":"WebSite","description":"A free AI-instructed school for Vue.js. Short tutorials, runnable code and quizzes that adapt to you.","name":"vuejs.school","url":"https://vuejs.school/","publisher":{"@id":"https://vuejs.school/#identity"}},{"@id":"https://vuejs.school/games/bug-hunt#webpage","@type":"WebPage","description":"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.","name":"Bug Hunt","url":"https://vuejs.school/games/bug-hunt","isPartOf":{"@id":"https://vuejs.school/#website"},"potentialAction":[{"@type":"ReadAction","target":["https://vuejs.school/games/bug-hunt"]}],"primaryImageOfPage":{"@id":"https://vuejs.school/#logo"}},{"@id":"https://vuejs.school/#identity","@type":"Organization","description":"A free AI-instructed school for Vue.js. Short tutorials, runnable code and quizzes that adapt to you.","name":"vuejs.school","url":"https://vuejs.school","logo":{"@id":"https://vuejs.school/#logo"}},{"@id":"https://vuejs.school/#logo","@type":"ImageObject","caption":"vuejs.school","contentUrl":"https://vuejs.school/apple-touch-icon.png","inLanguage":"en","url":"https://vuejs.school/apple-touch-icon.png"}]}
```