JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
 <component-parent></component-parent>
</div>

JavaScript

var bus=new Vue({});

Vue.component('component-child', {
   props:["name"],
   template: ' <span  v-on:click="chooseItem(name)" >Button  </span>',
   methods: {
     chooseItem: function(name){
       console.log('Item from child component',name);
       bus.$emit('item-selected', {
         'name' : name
       });
     }
   }
 });

Vue.component('component-parent', {
    template: '<div><component-child  v-for="q in items" :name="q"></component-child></div>',
    data:function(){
    return {
       items:["item1"]
      };
    },
 });
var vm = new Vue({
    el: '#app',
     methods:{
      itemSelectedRoot: function(item){
        console.log('itemSelectedListener from root instance', item);
      }
    },
    mounted(){
      bus.$on('item-selected',this.itemSelectedRoot)
    }
});