<div id="todo-list-example">
    <h1>ToDoALoo</h1>
    <div class="form-group">
        <input
            v-model="newTodoText"
            v-on:keyup.enter="addNewTodo"
            placeholder="Add a todoaloo"
            class="form-control"
          >  
        <small class="help-block text-muted">Press Enter To Add Item</small>
    </div>    
    <ul class="list-group" v-on:click="removeTodo">
        <li
            is="todo-item"
            v-for="(todo, index) in todos"
            v-bind:key="todo.id"
            v-bind:title="todo.title"
            class="list-group-item"
        ></li>
    </ul>
</div>
#todo-list-example{
    padding: 30px;
}
Vue.component('todo-item', {
    template: '\
    <li>\
      {{ title }}\
      <button class="btn btn-danger btn-xs float-right">&times;</button>\
    </li>\
  ',
    props: ['title']
})
new Vue({
    el: '#todo-list-example',
    data: {
        newTodoText: '',
        todos: [{
                id: 1,
                title: 'Learn Vue',
            },
            {
                id: 2,
                title: 'Feed The Pig And Chickens',
            },
            {
                id: 3,
                title: 'Practice World Domination Speech'
            }
        ],
        nextTodoId: 4
    },
    methods: {
        addNewTodo: function() {
            this.todos.push({
                id: this.nextTodoId++,
                title: this.newTodoText
            })
            this.newTodoText = ''
        },
        removeTodo: function(event){
            let children = Array.from(event.currentTarget.childNodes)
            let target = event.target
            if( target.tagName === 'BUTTON' ) {
                this.todos.splice(children.indexOf(target.parentNode), 1)
            }
        }
    }
})
Rerun