Trigger an animation when the mouse is held down on an element for at least 1 sec VUE?

Question

Vue.js

Good afternoon

Tell me how to write a timer correctly so that the menu opens when you hover and hold the mouse on the menu item for at least 1 second

Now like this:

<div class="nav-catalog" @mouseleave="hoverOut">
    <ul>
        <li class="nav-catalog__menu__item" 
            v-for="(item,index) of menu" 
            :class="{ active: current == index }"
            :data-menu="index" 
            @mouseenter="hoverOver(index)">
            <a :href="item.url">{{item.t}}</a>
        </li>
    </ul>
    <transition name="fade" mode="out-in">
        <div v-if="show" class="nav-catalog__submenu">
            <ul v-for="(item,index) of showMenu">
                <li class="first">
                    <a :href="item.url">
                        {{item.t}}
                    </a>
                </li>
            </ul>
        </div>
    </transition>
</div>

let subMenu = new Vue({
    el: '.nav-catalog',
    data: {
      show: false,
      timerId: 0,
      current: null
    },
    methods: {
        hoverOver(index) {
            this.timerId = setTimeout(() => {
                this.showMenu = this.subMenu[index]
                this.show = true
                this.current = index
            }, 1000);
        },
        hoverOut() {
            clearTimeout(this.timerId)
            this.timerId = 0
            this.show = false
            this.current = null
        },
    }

})

If you hover over a menu item and remove it for up to 1 second, then everything is correct, if you hold it for more than 1 second, the menu opens.

But if you quickly move past the menu item, it works as it wants, then it opens, then it closes. As if the mouseEnter or mouseLeave events don't fire