Input field loses its focus when I use [q-route-tab] component

[saifobeidat]

I have a page that contains an input field, I need it to be auto focused once you enter that page, so I am using this code:

Search.vue page

<template>
  <input type="text" ref="focusMe"/>
</template>

<script>
export default {
  mounted(){
    this.$nextTick(() => {
      return this.$refs.focusMe.focus();
    })
  }
}

</script>
  

If you go to Search.vue page using the code, the auto focus will work:

        <router-link
          :to="{
            name: 'search',
            query: {
              query: '',
              tab: 'lessons',
              country: selectedWebsiteCountryCode,
            },
            params: { lang: 'ar' },
          }"
          class="tab"
        >
          <i class="text-2xl fas fa-search"></i>
        </router-link>

But if you go to Search.vue page using the code, the auto focus will work for the first time only, and then it loses the focus:

<q-route-tab
          :to="{
            name: 'search',
            query: {
              query: '',
              tab: 'lessons',
              country: selectedWebsiteCountryCode,
            },
            params: { lang: 'ar' },
          }"
          class="tab"
        >
          <i class="text-2xl fas fa-search"></i>
        </q-route-tab>

[ontwikkelfabriek]

Looks like the mounted() hook is not called the second time you click in your second example with q-route-tab. Is that correct?