ToDo App using Vue - Stage 2

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<h3>
Todo List
</h3>
<div id="app">
  <ol class="list-group">
    <list-item v-for="(item,index) in items" v-bind:todo="item" v-bind:index="index" v-bind:key="item.text">
    </list-item>
  </ol>
  <br>
  <input v-model="newItem" />
  <button v-on:click="addToList()">Add Item</button>
</div>

JavaScript

// Creating an EventBus
var EventBus = new Vue();

// ToDo list component
Vue.component('list-item', {
  props: ['todo', 'index'],
  template: '<li class="list-group-item" :id="index">{{todo}}&nbsp;&nbsp;&nbsp;<button v-on:click="deleteItem(index)">Delete</button></li>',
  methods: {
    deleteItem: function(index) {
      EventBus.$emit('deletedindex', index)
    }
  }
});

// ROOT component
var app7 = new Vue({
  el: '#app',
  data: {
    items: [
    'Buy some fruits',
    'Get home early'
    ],
    newItem: ''
  },
  created: function() {
  	var this_1 = this;
    EventBus.$on('deletedindex', function(index) {
      this_1.deleteItemfromList(index);
    })
  },
  methods: {
    addToList: function() {
      this.items.push(
        this.newItem
      );
      this.newItem='';
    },
    deleteItemfromList:function(index){
    	this.items.splice(index,1);
    }
  }
});