Vue component .$on use case

You can use the $on-method for implementation of CommunicationHub -- common mixin, for non parent <--> child communication (like in your case).

For example: you have two Vue root applications: RootAppA and RootAppB. To communicate between them, you can create CommunicationHub mixin with next code:

let CommunicationHub = new Vue();

Vue.mixin({
  data: function () {
    return {
      communicationHub: CommunicationHub
    }
  }
});

Now you can send data by emitting custom event from RootAppA with $emit-method, and get this data by subscribing on this event in RootAppB, with method $on:

let RootAppA = {
  methods: {
    sendData(){
      this.communicationHub.$emit('customEvent', {foo: 'bar', baz: 1, comment: 'custom payload object'});
    }
  }
}

let RootAppB = {
  created(){
    this.communicationHub.$on('customEvent', (payload) => {
      console.log(payload); //{foo: 'bar', baz: 1, comment: 'custom payload object'}
    });
  }
}

By the way, please mention that CommunicationHub-pattern is not so flexible solution for bigger apps. So if your application will grow up, perhaps you will want to use Vuex-library (see my example in previous so-answer)