Запуск анимации при удержание мыши на элементе не менее 1 сек VUE?

Question

[Игорь]

Добрый день

Подскажите, как правильно написать таймер, чтоб меню раскрывалось при наведении и удержании мыши на пункте меню не менее 1 секунды

Сейчас так:

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

})

Если навести на пункт меню и убрать до 1 сек, то все корректно, если держать больше 1 сек - меню открывается.

Но если быстро провести мимо пункта меню, то работает как хочет, то открывается, то закрывается. Как будто события mouseEnter или mouseLeave не срабатывают