the start interface is as follows:

:

my question:
I can"t get focus when switching to input

my code:

<div class="surface" @click="active_search = false" v-if="active_search">
    <div class="color">
        <van-icon name="search"/>
        

    </div>
</div>
<div class="real" @click="active_search = true" v-else>
    <van-icon name="search"/>
    <input
        v-model="val"
        type="text"
        placeholder=""
        @change="changeInput()"
        ref="myInput"
        autofocus>
</div>
---------
data() {
    return{
        active_search:true,
        val:"",
    }
},
watch:{
    //input
    active_search:function(a,b){
        if(b == true){
            this.$refs.myInput.focus();
        }
    }
},