[SOLVED] I cannot watch Vuex state in components within v-tabs until first visit

I cannot watch Vuex state in components within v-tabs until first visit

vuetify: ^2.5.10 vuex: ^3.6.2 vue: ^2.6.14

I have an application developed in v-tabs. In the child component in the first of these tabs, I have a

<v-file-input
    v-model="file"
    outlined
    :rules="selector_rules"
    :clearable="false"
    :show-size="1000">
</v-file-input>
<v-btn color="primary" @click="commitData" class="mr-2">Commit</v-btn>

with

commitData() {
  this.$store.commit('setFile', this.file)
},

The store gets correctly set because the following computed property in the parent component

computed: {
    ...mapGetters({
      file: 'getFile',
    }),
},

seems to work: I watch it in this way:

file: {
  deep: true,
  immediate: true,
  handler() {
    console.log("Received file: " + this.file);
  }
},

The surprising thing, at least to me, is that the very same watch above, implemented in another component in the second tab, does not work until I visit (i.e., switch to) the second panel. However, the computed property works in this component because in the template I can see the new property.

After the first visit to the tab, the watch continues to work without problems.

Is there a reason for that and a way to avoid visiting it to make the watch work?

Solution

v-tabs loads content only on visit. Which means component will mount only when it's active.

You can use eager prop on your v-tab-item components to make sure they're always loaded and mounted.

API Docs reference: https://vuetifyjs.com/en/api/v-tab-item/#props-eager