todo.html

<script src="https://unpkg.com/vue"></script>
<style>
.done {
  text-decoration: line-through;
}
</style>

<div id="app">
  <p>
    <label v-for="m in modes">
      <input type="radio" :value="m" v-model="mode"> {{ m }}
    </label>
  </p>
  <input
    v-model="newTodo"
    @keyup.enter="addNewTodo">
  <ul>
    <li v-for="todo in filteredTodos"
      :class="{ done: todo.done }"
      @click="toggleTodo(todo)">
      {{ todo.text }}
    </li>
  </ul>
</div>

<script>
const vm = new Vue({
  data: {
    modes: ['all', 'done', 'not done'],
    newTodo: '',
    // Source state
    mode: 'all',
    todos: [
      { text: 'Learn JavaScript', done: true  },
      { text: 'Learn Vue', done: false  }
    ]
  },
  computed: {
    // Derived state
    filteredTodos () {
      switch (this.mode) {
        case 'done':
          return this.todos.filter(todo => todo.done)
        case 'not done':
          return this.todos.filter(todo => !todo.done)
        default:
          return this.todos
      }
    }
  },
  methods: {
    toggleTodo (todo) {
      todo.done = !todo.done
    },
    addNewTodo () {
      const newTodo = {
        text: this.newTodo,
        done: false
      }
      this.todos.push(newTodo)
      this.newTodo = ''
    }
  }
}).$mount('#app')
</script>