VueJs what is the difference between v-on:event and this.$on(event, handler)?

Question

I'm learning about Vuejs event handling.
I think that the developer could use this.$on('event', handler) in js file to process the 'event'.

There is an example.

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

js File

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);  //this is fired when clicking the button.
      },
      processEventFromView(data){
         console.log('view', data);  //this is not fired whenever.
      }      

   }
})

But in the example, only the handler,processEvent, attached by this.$on() is fired when clicking the button. What is the difference between v-on vs this.$on?
Why is v-on:event="processEventFromView" not called whenever?
Could I attach the event handler to the click event of the button with reference, ref, instead of v-on:click="emitEvent"?
Please help me what I'm wrong.

Answer 1

I guess it's related and answered by Linus Berg of Vue here https://stackoverflow.com/a/36159698/1225266 Although it's related to an earlier version of Vue (the post is from 2016) I guess it still applies.

In short the answer to your question

Why is v-on:event="processEventFromView" not called whenever?

is (I quote)

cannnot use v-on:custom-event-name in the template (that's only to be used on components).