<form @submit.prevent="addTodo">
  <input v-model="newTodo" required placeholder="new todo">
  <button>Add Todo</button>
</form>
<ul>
  <li v-for="todo in todos" :key="todo.id">
    <input type="checkbox" v-model="todo.done">
    <span :class="{ done: todo.done }">{{ todo.text }}</span>
    <button @click="removeTodo(todo)">X</button>
  </li>
</ul>
<button @click="hideCompleted = !hideCompleted">
  {{ hideCompleted ? 'Show all' : 'Hide completed' }}
</button>
