Vue / Vuex watcher динамическая / асинхронная загрузка компонентов

Question

У меня есть базовый компонент, в котором у меня есть динамический компонент с v-for, который отображает на основе вычисленного свойства.

Все, что я действительно пытался сделать до сих пор, что было неверной методологией,должен был обернуть метод, который загружает данные в установленное время.Этот вопрос является не только вопросом методологии, но и вопросом кодирования.

Мой базовый компонент выглядит следующим образом:

<template>
  <div>
    <v-progress-linear
      v-model="progressValue"
      v-if="loading"
    ></v-progress-linear>
    <component
      v-for="table in tables"
      :key="table.id"
      :is="table.structure"
      :table="table"
    ></component>
  </div>
</template>

<script>
  import Annual from './DataTables/Annual';
  import { mapState, mapGetters } from 'vuex';
  export default {
    name: "Page",
    props: [],
    components: {
      Annual,
    },
    data: () => ({
      progressValue: 0,
      loading: false,
      tables: [],
    }),
    computed: {
      ...mapGetters({
        currentTables: 'getCurrentPageTables',
        tableTitles: 'getCurrentPageTableTitles',
      }),
      ...mapState({
        pageName: state => state.pageName,
        snakeName: state => state.snakeName,
      }),
    methods: {
      updateTables(payload) {
        this.loading = true;
        payload.forEach(title => {
            this.tables.push(this.currentTables.filter(e => title === e.name)[0]);
            this.progressValue = this.tables.length / payload.length;
          })
      },
    },
    watch: {
      snakeName: {
        handler() {
          this.progressValue = 0;
          this.updateTables(this.tableTitles);
          this.$nextTick(() => {this.loading = false;})
        },
        immediate: true,
      },
    }
  }
</script>

Annual.vue - это просто компонент, отображающийVuetify элемент v-data-table и его структура довольно несущественны для этого.

Для всех намерений и целей мы можем рассматривать currentTables и tableTitles как массивы, первый из объектов, данные которого заполняют v-data-таблиц в Annual.vue и второй из строк, которые являются просто именами таблиц.

Когда пользователь переходит на другую страницу, геттеры возвращают разные данные, основанные на странице, на которую переходит пользователь, но некоторыеиз этих страниц более 20 таблиц, что замедляет загрузку страниц при переходе на эти страницы.Я пытаюсь сделать одну из двух вещей: 1. Асинхронно загружать компоненты по одному, в то же время делая страницу функциональной для навигации пользователя.2. Отобразите загрузчик, который исчезает после рендеринга всего содержимого.У меня возникают проблемы с выяснением того, как сделать последнее, потому что я не могу поместить эту функциональность в крюк mount (), поскольку все это происходит при изменении наблюдаемого параметра (следовательно, компонент не перемонтируется при каждом изменении маршрута).

Буду признателен за любые советы по решению этой проблемы.