ref on v-tab-item content is empty in mounted hook

Question

I am using Vuetify tabs to display two different components under different tabs. The issue I am facing here is that, in the mounted() when I try to use the refs of the components it just gives me the ref of the first component that is details, the general refs doesn't show. Please help me find where I am going wrong.

I have added debugger in mounted() and when I do this.$refs only the first details refs shows up.

    <template>
      <div>    
        <v-tabs slot="extension"
                v-model="tab_title"
                centered
                color="black"
                slider-color="red">
          <v-tab  key="details" href="#tab-details">Details</v-tab>
          <v-tab  key="general" href="#tab-general">General</v-tab>    
        </v-tabs>
        <v-tabs-items touchless v-model="tab_title">
          <v-tab-item key="details" value="tab-details">
            <v-card flat>
              <Details ref="details_form"></Details>
            </v-card>
          </v-tab-item>
          <v-tab-item key="general" value="tab-general">
            <v-card flat>
              <Info ref="general_form" :agent="agent"></Info>
            </v-card>
          </v-tab-item>
        </v-tabs-items>
      </div>
    </template>
    
    <script>
      import Details from 'views/details.vue';
      import Info from 'views/info.vue';
    
      export default {
        components: {
          Info,
          Details,
        },
        props: ['agent'],
        data: function () {
          return {
            tab_title: 'tab-account-details'
          };
        },
        mounted: function () {
          debugger
        }
      };
    </script>

Answer 1

It's probably because Vuetify is rendering tabs lazily (in other words doesn't render the content of the tab which is still hidden)

You can use eager prop on v-tab-item to force rendering of hidden tabs. See the docs