Vue.js method called multiple times using $emit and $on when it should only be called once

Had to remove the event handler on destroy.

 beforeDestroy () {
    EventBus.$off('increment', this.incrementCount)
 },

You can use $.once

created () {
  bus.$once('increment', this.incrementCount)
},

I had a similar issue and none of the above mentioned answers worked for me. I solved this issue by adding eventBus as a Vue Global Instance

Adding this in the main.js file

Vue.prototype.$bus = new Vue();

And calling it in the components like:

   mounted(){
    this.$bus.$on('chatData', (data) => {
        console.log('receieved in component');
    });
   },
   beforeDestroy() {
    this.$bus.$off('chatData');
   },
   methods:{
    sendData(data){
     this.$bus.$emit('someData',data); 
    }
   }