How does input automatically get focus in vue?

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();
        }
    }
},

Node.js element-ui javascript html5 vue.js

Mar.07,2022

watch: {
    // input
    active_search: function(a, b) {
      if (b == true) {
        this.$nextTick(function() {
          this.$refs.myInput.focus()
        })
      }
    }
  },

The reason why the

watch is changed to this way is that it has just been generated using vMuifMagint input, which is directly fetched through $refs and cannot be obtained.

autofocus= "autofocus"

Previous: What is the shortcut key for vscode to write flutter, to generate inheritance methods?

Next: About the problems encountered in returning templates in express+webpack