JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
 <component-parent @item-selected="itemSelectedRoot"  ></component-parent>
</div>

JavaScript

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);
       this.$emit('itemSelected', {
         'name' : name
       });
     }
   }
 });

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