SOURCE

Vue.component('todo-item',{
  template:'\
		<li>\
			{{title}}\
  		<button v-on:click="$emit(\'remove\')">X</button>\
		</li>\
	',
  props:['title']
})

new Vue({
  el:'#todo-list-example',
  data:{
    newTodoText:'',
    todos:[
      {id:1,title:'one'},      
      {id:2,title:'two'},      
      {id:3,title:'three'}
    ],
    nextTodoId:4
  },
  methods:{
    addNewTodo:function(){
      this.todos.push({
        id:this.nextTodoId,
        title:newTodoText
      })
        this.newTodoText=''
    }
  }
})

<div id="todo-list-example">
  <input
    v-model="newTodoText"
    v-on:keyup.enter="addNewTodo"
    placeholder="Add a todo"
  >
  <ul>
    <li
      is="todo-item"
      v-for="(todo, index) in todos"
      v-bind:key="todo.id"
      v-bind:title="todo.title"
      v-on:remove="todos.splice(index, 1)"
    ></li>
  </ul>
</div>