Vue preventing default router-link behaviour works in Chrome but not in Firefox

I have a component that has a router-link as a root tag. I want to prevent its default link behavior so it would fall back to the link if something is wrong with JS or it's disabled.

I made it work in Chrome with such event modifiers: @click.native.capture.prevent

But it doesn't work in Firefox. What am I missing?

Codesandbox

UPD: I found a workaround, but I'm still curios why this isn't working

It seems like Firefox treats multiple events on an element differently than Chrome which is why your code doesn't work as expected. I'm not exactly sure at this point, but it might be that Chrome works off all event listeners from the bottom up, whereas Firefox works from top down. This results in Chrome not firing the 1st event since the previous one (in this case the 2nd) uses prevent default, as you can see on the images below (that's just the event you added using @click.native.capture.prevent).

Chrome event handler:

Firefox event handler:

Since Vue Router adds a click event to a router-link on default you can solve this issue by either adding a wrapper to your child component (in this case the event won't get captured by the router-link since the wrapper prevents it)

<div>
  <router-link to="/shop"> text link</router-link>
</div>

or by manually overwriting the event property.

<router-link to="/shop" event=""> text link</router-link>

You can see how it works using a wrapper here.