Quasar 2 menu on hover (Vue 3)

menuHover.vue

<template>
  <q-button
      label="Hover button"
      @mouseenter="menuOver = true; checkMenu()" @mouseleave="menuOver = false; checkMenu()"
    >    
    <q-menu
      transition-show="jump-up" transition-hide="jump-down"
      anchor="top middle" self="bottom middle"
      :offset="[0, 2]"
      no-parent-event v-model="menuStatus"
      @mouseover="listOver = true; checkMenu()" @mouseout="listOver = false; checkMenu()"
    >
      MY MENU
    </q-menu>
  </q-button>
</template>

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

const menuStatus = ref(false)
const menuOver = ref(false)
const listOver = ref(false)

const checkMenu = debounce(() => {
  menuStatus.value = (menuOver.value || listOver.value)
}, 300)
</script>

Copied from my production code, lazy to make Codepen. Just try - it works 😊

Inspired by https://codepen.io/jd-0001/pen/GRRVxLZ
Optimized & refactored for Vue 3