[Vuejs]-How to defer a method in vue.js?

If you need to defer until the UI is updated, you can use the nextTick function. According to the Vue docs, nextTick has the following purpose:

Defer the callback to be executed after the next DOM update cycle. Use it immediately after you’ve changed some data to wait for the DOM update.

Use it like this:

competencesTabClick(){
    this.$nextTick(function() {this.$refs.search.focus()});
},

You can wrap this.$refs.search.focus() in a setTimeout. So, if will load after sometime. Like that:

competencesTabClick(){
  setTimeout(() => {
    this.$refs.search.focus()
  }, 200)
}

or you can also use this.$nextTick like that:

competencesTabClick(){
  this.$nextTick(function () {
    this.$refs.search.focus()
  })
}

You can know more about nextTick here

Hope it helps !!