How to Handle Vue Router Link Mouse Events Properly

Digging deeper into Vue router, I attempted something fairly mundane, namely listening to a couple of mouse events on an anchor tag generated by <router-link>.

I simply wanted to toggle a menu when hovering over a certain link. Easy, right? Well, the events simply weren't registering.

Note I am using Vue 2.6 for this example.

A bit of a head-scratcher but after some research I found out that all I needed to do was to apply the native modifier to the event, as shown below.

Before

This code doesn't trigger the handler.

<template>
    <router-link
      to="/someroute"
      @mouseenter="handleEvent"
      @mouseleave="handleEvent"
    >
      Some Route
    </router-link>
</template>

After

This works.

<template>
    <router-link
      to="/someroute"
      @mouseenter.native="handleEvent"
      @mouseleave.native="handleEvent"
    >
      Some Route
    </router-link>
</template>