Vuejs - загруженные API данные не отображаются правильно на вкладках

Question

На моей странице 2 вкладки. Вкладка A отлично загружает данные из API. Вкладка B представляет собой подсписок вкладки A, содержащий все избранные элементы / помеченные элементы из вкладки A. Если я нажимаю вкладку B, данные не отображаются, если я нажимаю вкладку A на вкладке B, а затем снова вкладку B, затем отображаются данные. Короче говоря, когда вкладка B открывается только во второй раз, отображаются данные.

Код вкладки A (работает и отлично загружается):

<template>
  <div id="search" class="tab-pane in active">

    <div class="common-panel">
      <div class="panel-header">
        <div class="clearfix border-bottom-green pb10">
          <h4
            v-if="jobs.length > 0"
            class="pb10"
          >Most Recent</h4>
          <h4
            v-else-if="jobs.length === 0 && initialFetchDone"
            class="pb10"
          >None</h4>
        </div>
      </div>

      <div class="panel-body">
        <listing
          @changePage="changePage"
          :jobs="jobs"
          :initialFetchDone="initialFetchDone"
          :totalRecords="totalRecords"
          :page="page"
          :pages="pages"
          :recordsPerPage="recordsPerPage"
          :candProfilePic="candProfilePic"
          :candName="candName"
        ></listing>
        <v-spinner v-if="$wait.is('fetchingJobs')"></v-spinner>
      </div>
    </div>
  </div>
</template>

<script>
import config from '@/config'

import { mapGetters, mapActions } from 'vuex'

export default {
  name: 'search',
  props: {},
  data() {
    return {
      page: 1,
      pages: 1,
      jobs: [],
      applications: [],
      marked: [],
      recordsPerPage: 20,
      totalRecords: 0,
      filtersApplied: false,
      initialFetchDone: false,
      payload: {
        jobTitle: '',
        companyName: '',
      }
    }
  },
  computed: {
    ...mapGetters('candidateSettingsModule', ['candidateInfo']),
    ...mapActions('jobSearchModule', ['getJobs']),
    candProfilePic: function() {
      if (
        this.candidateInfo &&
        this.candidateInfo.canPic &&
        this.candidateInfo.canPic.cProfilePic
      ) {
        return this.candidateInfo.canPic.cProfilePic
      } else {
        return config.DEFAULT_PROFILE_PIC
      }
    },
    candName: function() {
      return this.candidateInfo.firstName + ' ' + this.candidateInfo.lastName
    }
  },
  components: {
    'filter-box': () => import('./filter-box/filter-box.component.vue'),
    listing: () => import('../listing/listing.component.vue')
  },
  mounted: function() {
    this.payload = {
      ...this.payload,
      ...{
        count: this.recordsPerPage,
        page: this.page
      }
    }

    this.$root.$on('eventGetAllJobs', () => {
      this.fetchJobs(this.payload)
    })
  },
  methods: {
    changePage(page = null) {
      if (page !== null) {
        this.page = page
      }

      this.payload = {
        ...this.payload,
        ...{
          count: this.recordsPerPage,
          page: this.page
        }
      }

      this.fetchJobs(this.payload)
    },
    fetchJobs(payload) {
      this.$wait.start('fetchingJobs')

      this.$store
        .dispatch('jobSearchModule/getJobs', payload)
        .then((res) => {
          this.mapResponseToJob(res)

          this.$wait.end('fetchingJobs')
          this.$emit('saved')
          this.initialFetchDone = true
          window.scrollTo(0, 0)
        })
        .catch((e) => {
          this.$wait.end('fetchingJobs')
          console.error(e)
        })
    },
    mapResponseToJob(response) {
      const jobs = response[0]
      this.jobs = this.$parent.mapResponseToJob(jobs)

      this.totalRecords = this.jobs.length

      this.pages = Math.ceil(this.totalRecords / this.recordsPerPage)
    },
  }
}
</script>

<style lang="scss" scoped>
</style>

Вкладка B: при первом нажатии данные не отображаются, если щелкнуть другую вкладку, а затем при нажатии кнопки B во второй раз данные отображаются идеально. Журнал консоли показывает выборку данных в первый раз, поэтому данные из бэкэнда не являются проблемой Код для вкладки B:

<template>
  <div id="bookmarks" class="tab-pane in active">
    <div class="common-panel">
      <div class="panel-header">
        <div class="clearfix border-bottom-green pb10">
          <h4 class="pb10">{{$t('Bookmarks')}}</h4>
        </div>
      </div>
      <div class="panel-body">
        <listing
          :jobs="jobs"
          :initialFetchDone="true"
          :page="1"
          :pages="10"
          :paginationEnabled="false"
          :candProfilePic="candProfilePic"
          :showNoJobsMessage="false"
          :candName="candName"
        ></listing>
        <v-spinner v-if="$wait.is('fetchingJobs')"></v-spinner>
      </div>
    </div>
  </div>
</template>

<script>
import config from '@/config'

import { mapGetters } from 'vuex'

export default {
  name: 'bookmarks',
  props: {},
  data () {
    return {
      jobs: []
    }
  },
  mounted: function () {
    this.mapMarkedJobs()
  },
  computed: {
    ...mapGetters('candidateSettingsModule', ['candidateInfo']),
    ...mapGetters('jobSearchModule', ['markedJobs']),
    candProfilePic: function () {
      if (
        this.candidateInfo &&
        this.candidateInfo.canPic &&
        this.candidateInfo.canPic.cProfilePic
      ) {
        return this.candidateInfo.canPic.cProfilePic
      } else {
        return config.DEFAULT_PROFILE_PIC
      }
    },
    candName: function () {
      return this.candidateInfo.firstName + ' ' + this.candidateInfo.lastName
    }
  },
  watch: {
    markedJobs (props) {
      this.jobs = this.$parent.mapResponseToJob(props)
    }
  },
  components: {
    listing: () => import('../listing/listing.component.vue')
  },
  methods: {
    mapMarkedJobs () {
      this.jobs = this.$parent.mapResponseToJob(this.markedJobs)
    },
    getJobs() {
      console.log("jobs are:", this.markedJobs)
    }
  },
  beforeMount(){
    this.getJobs();
  }
}
</script>

<style lang="scss" scoped>
</style>

То, что я пробовал: -Консоль зарегистрируйте данные API на вкладке b, чтобы увидеть, получаются ли они в первый раз, они выбираются в первый раз. -Добавить данные stati c (заголовок / абзац) на второй вкладке, он загружается вправо и отображается при первом нажатии.

Сводка: Данные API на вкладке B не отображаются в первый раз, но имеют щелкнуть другую вкладку, а затем снова вкладку B, после чего данные из API отобразятся идеально.