How vue detects if the mouse is on the div

<template>
    <div :class="showFlag ? "show" : "hide"" @mouseenter="enter" @mouseleave="leave"></div>
</template>
 leave() {
                setTimeout(() => {
                    if (this.showFlag) {
                        this.showFlag = false
                    }
                }, 2000)
            }

as above. On the leave function, I want to delay processing the showFlag case for two seconds.
it is possible that the mouse is moved out and in within two seconds.
I need to check on settimeout to see if the mouse is over the div.
how about checking if the mouse is on the div?

Oct.15,2021

use an ID to record whether the mouse has been moved in


add a global variable, mouseIsEnterd, when mouseIsEnterd=true, executes @ mouseenter, mouseIsEnterd=true, executes @ mouseback, mouseIsEnterd=false, then adds the judgment of mouseIsEnterd to the delay function

Menu