todo.html

<script src="https://npmcdn.com/vue@next/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/animatecss/3.5.2/animate.min.css">
<style>
.done {
  text-decoration: line-through;
}

.todo {
  transition: all 0.5s ease;
  height: 30px;
  margin: 0;
}
.v-enter, .v-leave-active {
  opacity: 0;
  height: 0;
}
</style>

<div id="app">
  <transition
    enter-active-class="animated bounceIn"
    leave-active-class="animated bounceOut"
    mode="out-in">
    <p key="1" v-if="!todos.length">No todos yet.</p>
    <p key="2" v-else>Yes! We have something to do.</p>
  </transition>

  <div>
    <input type="radio" v-model="shown" value="all"> all
    <input type="radio" v-model="shown" value="done"> done
    <input type="radio" v-model="shown" value="not done"> not done
  </div>

  <button @click="todos.reverse()">reverse</button>

  <transition-group tag="ul">
    <todo v-for="todo in todos"
      :key="todo.text"
      :todo="todo"
      @removed="removeTodo(todo)">
    </todo>
  </transition-group>

  <form @submit.prevent="addTodo">
    <input v-model="newTodo" @keydown="touched = true">
    {{ validationMessage }}
  </form>

  <button @click="removeDone">Remove all done todos</button>
</div>

<!-- child template -->
<script type="text/x-template" id="todo-template">
  <li class="todo" :class="{ 'done': todo.done }">
    <span @click="toggle">{{ todo.text }}</span>
    <button @click="remove">X</button>
  </li>
</script>

<script>
Vue.component('todo', {
  props: ['todo'],
  template: '#todo-template',
  methods: {
    toggle () {
      this.todo.done = !this.todo.done
    },
    remove () {
      this.$emit('removed')
    }
  }
})

const app = new Vue({
  data: {
    todos: [
      { text: 'Attend Laracon US', done: true },
      { text: 'Master JavaScript', done: false },
      { text: 'Attend Laracon EU', done: true },
      { text: 'Master Vue.js', done: false }
    ],
    newTodo: '',
    touched: false,
    shown: 'all'
  },
  computed: {
    isValid () {
      return this.newTodo.trim()
    },
    validationMessage () {
      return this.touched && !this.isValid
        ? 'input cannot be empty.'
        : ''
    },
    shownTodos () {
      return this.todos.filter(todo => {
        switch (this.shown) {
          case 'all':
            return true
          case 'done':
            return todo.done
          case 'not done':
            return !todo.done
        }
      })
    }
  },
  methods: {
    removeTodo (todo) {
      const index = this.todos.indexOf(todo)
      this.todos.splice(index, 1)
    },
    addTodo () {
      const newTodo = this.newTodo.trim()
      if (!newTodo) {
        return
      }
      this.todos.push({
        text: newTodo,
        done: false
      })
      this.newTodo = ''
    },
    removeDone () {
      this.todos = this.todos.filter(todo => {
        return !todo.done
      })
    }
  }
}).$mount('#app')
</script>

Router app link https://gist.github.com/yyx990803/bf71d47a9b276f15e590e0059bb43617

Vuex example link https://gist.github.com/yyx990803/4724fa2a66a17e2999c2c360e89f4d9a