我将ref输入到我的输入中。但是我不能集中精力，为什么？

Question

我想制作一个基本的待办事项应用程序。输入和标签彼此重叠。我的状态中有一个变量“ editMode”，默认情况下为false。 如果“ editMode”为true，则我的标签将消失并显示输入。我放置 @dblclick到我的标签。当这个被调用时，“ editMode”将变为true，并且我想关注我的输入字段。

我将ref放在输入元素上。因此，用户双击标签，我想使用“ this。$ refs.input.focus（）”来集中输入内容。我也尝试过使用此方法。$ nextTick

这是我的模板

  <div class="todo">
    <div class="todo-left">
      <input type="checkbox" class="completed"/>
    </div>
    <div class="todo-middle">
      <label v-if="!editMode" @dblclick="activateEditMode">{{text}}</label>
      <input type="text" v-model="text" v-show="editMode" ref="input">
    </div>
    <div class="todo-right" v-if="!editMode">
      <span>❌</span>
    </div>
  </div>
</template>

这是脚本

<script>
export default {
    name:'TodoItem',
    data:function(){
      return {
        editMode:false,
        text:'Go to shopping'
      }
    },
    methods:{
      activateEditMode:function(){
        this.editMode=true;
        this.$nextTick(()=>{
          this.$refs.input.focus()
        })

      },
      onClickOutside:function(e){
        const { input} =this.$refs
        if(input && !input.contains(e.target)){
          this.editMode=false
        }

      }
    },
    mounted() {
        document.addEventListener("click", this.onClickOutside);
    },
    beforeDestroy() {
        document.removeEventListener("click", this.onClickOutside);
    }

}
</script>