How to make such a function in vue?

Question

css

I have this div block:

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

And here is the vue code:

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

Of course, this is some piece of shit ... but I'm just getting started.
The code works but not completely... There is an icon on the page, and when you hover over it, a search field (input) should appear, and if the user removes the cursor from the input, then it disappears, how to do this?

Answer 1

Why can't css be broken?

Answer 2

"@mouseenter" try