Как сделать такую функцию на vue?

Question

[lemonlimelike]

Есть такой div блок:

<div class="uk-navbar-right">
                <ion-icon @mouseover="mouseover" v-show="mouse2" name="search" size="large"></ion-icon>                
                    <form action="#">
                        <div class="uk-inline">
                            <ion-icon v-show="mouse" v-bind:class="{{@style}}" name="search" size="large"></ion-icon>
                            <input v-show="show" type="text" class="uk-input" placeholder="{{ @message }}">    
                        </div>
                    </form>
                </div>

И вот код vue:

<script>
        new Vue({
            el:"#header",
            data:{
                message: "Hello World",
                show: false,
                mouse: false,
                mouse2: true,
                style: "uk-form-icon uk-form-icon-flip"
            },
            methods:{
                mouseover: function(){
                    this.show = !this.show
                    this.mouse = !this.mouse
                    this.mouse2 = !this.mouse2
                }
            }
        })
    </script>

Конечно же это какой-то кусок говна... но только начинаю.
Код работает но не до конца... На стр есть иконка, и при наведение на нее, должно появляться поисковое поле(input), а если пользователь убрал курсор с input'а то, чтоб оно исчезало, как это сделать?

Answer 1

[Argumentus]

а что css разрулить нельзя?

Answer 2

[Miki06]

"@mouseenter" попробуй