JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<div id="demo">
<input v-model="newitem">
  <button @click="addItem">Add</button>
  <button @click="sendMessage">Send Message</button>
  <button @click="showAll">Show</button>
  <service v-for="(each, index) in allData" :service-name="each" @remove="allData.splice(index,1)"  :index="index"></service>
</div>

JavaScript

Vue.component('service', {
  template: '<div>' +
    '<span>{{serviceName}}</span>' +
    '<button @click="remove">X</button>' +
    '</div>',
  props: ['serviceName', 'index'],
  methods: {
  	remove() {
    	this.$emit('remove');
    },
    logIndex() {
      console.log(this.index)
    }
  },
  created() {
  	Bus.$on('send-message', this.logIndex)
  },
  destroyed() {
    Bus.$off('send-message', this.logIndex)
  }
})

var demo = new Vue({
  el: '#demo',
  data: {
    newitem: '',
    allData: [],
  },
  methods: {
  	addItem() {
    	this.allData.push(this.newitem);
    },
    sendMessage() {
    	Bus.$emit('send-message');
    },
    showAll() {
    	console.log(this.allData.length);
    },
  },
})

var Bus = new Vue();