https://sfc.vuejs.org/#eNp1U8GOmzAQ/ZURF4iUQKveKInaSpV66K3H0gPgYSELtmUPpBHi3zvGZnfTqr7Y4/f8PPPsWaLPWqfzhFEeFbYxvSawSJO+lBJ49KNWhmABgy2s0Bo1Qsz0uJSe0ChpCTo1o4GzYyVtNVg8vEWf8R6wOH4AcEZJNmA/fzHmUaGaaWQorYT46jjfe0so0SQxawl1k/EREjzA+QKLP+IGY+lcDROyIqYcfXzF/FUeTvVku2Rx/NwTj76C3E+BReoHmV4+JQdYQ9puLjLvEzvEAeGoh4ow+FV0H8IK4NtmSqIMSEUHoA6hnoiUhBoHdYNKCqC7…

hover-and-keyboard.vue

<script setup>
    import { ref } from 'vue'

    const hover = ref(false)
    const key = ref('')
    const events = ref([])

    document.addEventListener('keydown', (e) => {
        key.value = e.key;
        events.value.push({ key: e.key, hover: hover.value.toString() })
    })
</script>

<template>
    <h3>
      Hover (or not) the button below and type
    </h3>
    <button @mouseover="hover = true" @mouseleave="hover = false" class="hoverBtn">
        Hover: {{hover}}
    </button>
    <table>
        <th>key</th>
        <th>during hover</th>
        <tr v-for="ev in events">
            <td>{{ev.key}}</td>
            <td>{{ev.hover}}</td>
        </tr>
    </table>
</template>

<style>
  .hoverBtn {
    border: 1px solid black;
    width: 10rem;
  }
</style>