Estoy tratando de crear un componente de menú desplegable simple que se abre cuando se pasa el cursor sobre el Encabezado (un botón). Estoy haciendo esto en Laravel 8.4 y Vue 2.

Tengo dos problemas:

1. La función mouseenter/mouseleave no funciona correctamente. Cuando paso el mouse sobre el botón, parpadea, abriendo y cerrando el menú desplegable varias veces. Incluso si quito la mano del mouse, sigue disparando y encendiendo mientras el cursor descansa sobre el botón.
2. Dado que tengo el menú desplegable ligeramente separado del botón, cuando muevo el mouse hacia abajo al menú realmente abierto, se cerrará antes de que el mouse llegue a él.

¿Qué estoy haciendo mal en el primer caso y cómo manejo el segundo?

Dropdown.vue

 <template> <div class="relative"> <div @mouseenter="open = true" @mouseleave="open = false" > <slot name="trigger"/> <i :class="{'fa fa-chevron-up':upArrow, 'fa fa-chevron-down':downArrow}" /> </div> <div v-show="open" style="display: none;" @click="open = false" > <div class="dropdown-menu"> <slot name="content"/> </div> </div> </div> </template> <script> export default { data() { return { open: false, } }, } </script>

componente de llamada

 <div class="mt-1"> <dropdown> <template #trigger> <button class="tab-title"> PEOPLE </button> </template> <template #content> <dropdown-link href=""> Alice <dropdown-link> <dropdown-link href=""> Bob <dropdown-link> <dropdown-link href=""> Charles <dropdown-link> </template> <dropdown> </div>