Autofocus in a modal activated via the store

Question

I want to find a prettier solution on that problematic :

A click on a main component button set to true the var showUserAddModal in the store

// App.vue
// ...
computed: {
  ...mapGetters('admin', [  'showUserAddModal'  ])
}
// ... 
methods: {
  ...mapMutations('admin', [ 'setShowUserAddModal' ])
}
// ...

A modal component is displayed :

<div class="modal" :class="{ 'is-active': showUserAddModal }">

I want to give focus into an inpput text localized in a sub-sub-component CalendarAdminUserAdd.vue > AutoCompletion.vue

// App.vue
// ...
<div class="modal" :class="{ 'is-active': showUserAddModal }">
  <div class="modal-background"></div>
  <calendar-admin-user-add team-id="9" ref="calendaradminuseradd" />
</div>
// ...

// CalendarAdminUserAdd.vue
<template>
 <div class="modal-card">
   // ...
   <auto-completion width="400px"
                    max-height="400px"
                    @input="selectUser($event)"
                    ref="adsearchcomponent" />
   // ...
</template>

// AutoCompletion.vue
<template>
  <div class="dropdown is-active">
  <div class="dropdown-trigger">
      <input type="text" class="input" ref="searchinput"
             placeholder="Nom Prénom" v-model="searchFilter"
             @keyup="searchUser" />
  </div>
  // ...
</template>
// ...

The issue is, with the use of the store, that the setShowUserAddModal method is coming from the store (mapMutations) and have, by nature, an asynchrone behaviour. And I can't figure out how I can catch the effective display event of the modal, to execute my focus() on it. For the moment, with a poor setTimeout, it works :

// App.vue
// ...
watch: {
  showUserAddModal : function () {
    setTimeout( () => {
      this.$refs.calendaradminuseradd.$refs.adsearchcomponent.$refs.searchinput.focus()
    }, 500)
  }
}
// ...

Even with a nextTick() it doesn't work. I use the framework CSS Bulma for the modal, with no Javascript, so I don't think that Bulma could interfer.

The store :

// store/admin.js 
export default {
  namespaced: true,
  state: {
    showUserAddModal: false
  },
  getters: {
    showUserAddModal: state => state.showUserAddModal
  },
  mutations: {
    setShowUserAddModal(state, showUserAddModal) {
      state.showUserAddModal = showUserAddModal
    }
  }
}

Here I am, thank you for reading til here ;) and thanks for your help !