JSFiddle - React, Tailwind, and code Playground

HTML

<div id="mainapp" v-on:event="processEventFromView">
        <button type="button" v-on:click="emitEvent">
           Emit Event
        </button>
    </div>

CSS

.item{
  display:none;
  background:#999;
  padding:20px;
  margin-top:20px;
}

.item.show{
  display:block;
}

JavaScript

var app = new Vue({
      el:"#mainapp",
      data:{
        show:false
      },
      created:function(){
         this.$on('event', this.processEvent);
      },
      methods:{
          emitEvent:function(){
              this.$emit('event', {data:'mydata'});
          },
          processEvent(data){
             console.log('js', data);
          },
          processEventFromView(data){
             console.log('view', data);
          }      

       }
    })