Vue js listen default events with vm.$on

Question

interesting to me it is possible to listen default event with vm.$on?Is it impossible then why?

This is my html

<div id="app">
    <div @click="clickListener">dsdsd</div>
</div>

This is my script

let vm = new Vue({
            el:"#app",
            methods:{
                clickListener()
                {
                    console.log("called clickListener")
                }
            }
        })

        vm.$on('click',function(){
            console.log("hello")
        })

Answer 1

You need to emit an event you want to listen to first, use vm.$emit() like this:

let vm = new Vue({
  el:"#app",
  methods:{
    clickListener() {
      this.$emit('eventName', 'sample-value');
    }
  }
})

vm.$on('eventName', function(value){
  console.log(value); // 'sample-value'
});

EDIT: try something like this:

const vm = new Vue({
  el: '#app',
  mounted() {
    const app = document.getElementById('app');
    app.addEventListener('click', (event) => {
      this.$emit('click', event);
    });
  }
});

vm.$on('click', (event) => {
  console.log('click', event);
});