Why doesn't focus() work?

Question

Vue.js

By clicking on the button, the text should be edited. Accordingly, I made an input, removed the disabled attribute, but there is not enough automatic focus on the input and text selection.
Here is the code:

methods: {
 editBoardName: function() {
                 this.isDisabled = false;
                 this.$refs.headerBoardName.focus();
  },

editBoardName is launched by clicking on the button, there is no v-model for input, everything works separately here, focus is set if this.isDisabled = false initially. If together, then disabled is removed, but the focus does not work. I have tried putting this.$refs.headerBoardName.focus(); into a separate function, still does not help. With select() the same story, 1 in 1.

Answer 1

Because input is still disabled the moment you pull focus. Use nextTick :

this.isDisabled = false;
this.$nextTick(() => this.$refs.headerBoardName.focus());