Manually Listen For Mouse Event In Vue Instance

I am trying to listen to a mouse event in a child component from the component, but I don't get the event being fired. It works when I listen for the event in html, but not This wo

Solution 1:

In the second snippet the mounted hook function should be outside of methods, this will not solve the problem, and vm.$on function is used for custom event not for native ones like click and mouseleave, like explained here :

if you call this :

 vm.$on('test', function (msg) {
    console.log(msg)
  })

You should have a code like the following one somewhere :

 vm.$emit('test', 'hi')

Since you're not able to use this.$on method, i recommend you the following solution using ref by adding ref attribute to your a element by giving link or whatever you want and in the mounted hook add the following code:

this.$refs.link.addEventListener('mouseleave', () => {
      this.mouseleave()
    }, false);

Vue.config.devtools = false;
Vue.config.productionTip = false;

newVue({
  el: '#mouse',
  data: {
    message: 'Hover Me!'
  },
  methods: {
    mouseover: function() {
      this.message = 'Good!'
    },
    mouseleave: function() {
      this.message = 'Hover Me!'
    }
  },
  mounted() {
    this.$refs.link.addEventListener('mouseleave', () => {
      this.mouseleave()
    }, false);

  }
});

body {
  background: #333;
}

body#mouse {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: block;
  width: 280px;
  height: 50px;
  margin: 0 auto;
  line-height: 50px;
  text-align: center;
  color: #fff;
  background: #007db9;
}

body#mousea {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script><divid="mouse"><a @mouseover="mouseover"ref="link">
    {{message}}
  </a></div>