I am trying to create a simple drop down menu component that opens when the Heading (a button) is hovered over. I am doing this in Laravel 8.4 and Vue 2.

I have two problems:

1. The mouseenter/mouseleave functionality is not working properly. When I mouse over the button it flickers, opening and closing the dropdown multiple times. Even if I take my hand off the mouse, it just keeps firing off and on while the cursor rests on the button.
2. Since I have the dropdown menu slightly separated from the button, when I move the mouse down to the actually open menuit will close before the mouse gets to it.

What am I doing wrong in the first case and how do I handle the second?

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>

calling component

    <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>