I have a component with a router-link as the "root element" in Vue and I would like to trigger focus on mouseenter and blur on mouseleave. I have currently set it up like this:

<template>
  <router-link
    :to="LINK"
    ref="card"
    @mouseenter="focus"
    @mouseleave="blur"
  >
    CONTENT
  </router-link>
</template>

<script>
export default {
  methods: {
    focus() {
      this.$refs.card.$el.focus();
    },
    blur() {
      this.$refs.card.$el.blur();
    },
  }
}
</script>

But focus and blur doesn't get triggered when I hover or leave the mouse on the link with this code. I get no errors in the console either. Is there anything additional that needs to be done in order for it to work?