Vuejs Event Emitter

componentA.vue

<template>
  <button @click="emitEvent">EVENT</button>
</template>

<script>
  import { EV } from './events'
  
  export default {
    methods: {
      emitEvent() {
        EV.emit('sample-event', 'foobar') 
      }
    }
  }
</script>

componentB.vue

<template>
  <component-a></component-a>
  <br>
  <div>{{ msg }}</div>
</template>

<script>
  import { EV } from './events'
  import ComponentA from './componentA.vue'
  
  export default {
    data() {
      return {
        msg: null 
      }
    },
    created() {
      EV.on('sample-event', (foo) => {
        this.$set('msg', foo)
      })
    }
  }
  
</script>

events.js

import { EventEmitter } from 'events'

export const EV = new EventEmitter

But in events.js, it should be like this
const EventEmitter = require('events')
export const myEmitter = new EventEmitter()