Why doesn't mouseout work like this?

Question

JavaScript

Here is a small piece of code:

<div class="uk-inline">
                            <a href="#" class="uk-icon-button" @mouseover="showDrop = !showDrop">
                                <ion-icon name="person" size="large" class="uk-border-circle icon-user"></ion-icon>
                            </a>
                            <div class="dropdown uk-box-shadow-medium" v-show="showDrop" @mouseout="showDrop = false">
                                <div class="auth" v-show="showAuth">
                                    <div class="uk-card">
                                        <div class="auth-title">
                                            <span class="uk-text-bold">Авторизация</span>
                                        </div>
                                        <div class="uk-card-body auth-body">
                                            <form method="POST" action="{{ route('login') }}" aria-label="{{ __('Login') }}">
                                                @csrf
                                                <div class="auth-form">
                                                    <input id="email" type="email" class="uk-input form-control{{ $errors->has('email') ? ' is-invalid' : '' }}" name="email" value="{{ old('email') }}" required autofocus placeholder="{{ __('Логин') }}">
                                                    @if ($errors->has('email'))
                                                        <span class="invalid-feedback" role="alert">
                                                            <strong>{{ $errors->first('email') }}</strong>
                                                        </span>
                                                    @endif
                                                </div>
                                                <div class="auth-form">
                                                    <input id="password" type="password" class="uk-input form-control{{ $errors->has('password') ? ' is-invalid' : '' }}" name="password" required placeholder="{{ __('Пароль') }}">
                                                    @if ($errors->has('password'))
                                                        <span class="invalid-feedback" role="alert">
                                                            <strong>{{ $errors->first('password') }}</strong>
                                                        </span>
                                                    @endif
                                                </div>
                                                <div class="auth-form">
                                                    <a class="uk-link uk-link-reset" href="{{ route('password.request') }}">
                                                        {{ __('Забыли пароль?') }}
                                                    </a>
                                                </div>
                                                <div class="auth-form">
                                                    <button type="submit" class="uk-button auth-form-button">
                                                        {{ __('Войти') }}
                                                    </button>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="auth-form auth-form-reg">
                                            <span class="uk-text">Вы еще не с нами?:)</span>
                                            <br>
                                            <a @click="onClick" href="#" class="uk-link auth-form-reg-link">Зарегистрироваться!</a>
                                        </div>
                                    </div>
                                </div>
                                <div class="auth" v-show="showReg">
                                    <div class="uk-card">
                                        <div class="auth-title">
                                            <span class="uk-text-bold">Регистрация</span>
                                        </div>
                                        
                                        <div class="auth-form auth-form-reg">
                                            <span class="uk-text">Вы еще не с нами?:)</span>
                                            <br>
                                            <a @click="onClick" href="#" class="uk-link auth-form-reg-link">Зарегистрироваться!</a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>

And here is vue:

new Vue({
            el:"#header",
            data:{
                showDrop:false,
                showAuth: true,
                showReg: false
            },
            methods:{
                 onClick: function(){
                    this.showAuth = !this.showAuth
                    this.showReg = !this.showReg
                }
            }
        })

When you hover over icon, a menu appears, and if you remove the cursor from this menu, the mouseout event fires, that is, the menu disappears ... and if you hover over input in this menu, then the menu immediately disappears ... Input is part of this menu, why is it disappears?
Here is the jsfiddle: https://jsfiddle.net/eywraw8t/84898/

Answer 1

Everything works as it should . To get the desired behavior, you should handle the mouseleave event instead of mouseout. Like so .

Answer 2

https://jsfiddle.net/koyxm8u3/1/