卡在单页上，html无法呈现

Question

因此我遇到了一个奇怪的问题。在特定页面上花费了一些时间后（听起来很有趣，我知道），我被卡住了。导航到其他页面的按钮实际上会更改路由路径并触发生命周期（api调用和操作），但是html保持不变。.在控制台中，我没有遇到任何错误。

有人知道我应该在哪里寻找面包屑吗？

<template>
  <v-card v-if="$vuetify.breakpoint.mdAndUp" style="min-height: 95%" class="ma-4">
    <v-toolbar flat>
      <v-btn class="ma-2" fab text color="white" small @click="$router.back()">
        <v-icon color="black">mdi-arrow-left</v-icon>
      </v-btn>
      <v-toolbar-title
        >{{contact.firstname}} {{contact.lastname}}</v-toolbar-title
      >
      <v-spacer/>
<!--      <v-btn color="primary" @click="assignAgentDialog = true">Assign to agents</v-btn>-->
    </v-toolbar>
    <v-card-text class="horizontal-border">
      <v-row no-gutters>
        <v-col cols="12" lg="4">
          <profile-quick-view :contact="contact"></profile-quick-view>
        </v-col>
        <v-col cols="12" lg="8" class="vertical-border">
          <v-tabs background-color="white" color="grey" v-model="tab"  dark>
            <template v-for="item in items" >
              <v-tab :to="'/'+ $route.params.office + '/contacts/' + $route.params.id + '/' + item.content + '?type=view'" style="color: grey" :key="item.tab">
                {{ item.tab }}
              </v-tab>
            </template>
          </v-tabs>
          <v-tabs-items v-model="tab">
            <v-tab-item
              v-for="item in items"
              :key="item.tab"
              :value="'/'+ $route.params.office + '/contacts/' + $route.params.id + '/' + item.content + '?type=view'"
            >
              <v-card flat >
                <v-card-text class="horizontal-border">
                  <nuxt-child  :contact="contact" />
                </v-card-text>
              </v-card>
            </v-tab-item>
          </v-tabs-items>
        </v-col>
      </v-row>
    </v-card-text>
    <team-list
      v-model="assignAgentDialog"
      open-in-dialog
      selection-mode
      :roles="[]"
      @cancelSelection="assignAgentDialog = false"
      @confirmSelection="assignAgent"/>
  </v-card>
  <v-card v-else class="ma-2">
    <v-tabs background-color="white" color="grey" v-model="tab"  dark>
      <template v-for="item in items" >
        <v-tab :to="'/'+ $route.params.office + '/contacts/' + $route.params.id + '/' + item.content + '?type=view'" style="color: grey" :key="item.tab">
          {{ item.tab }}
        </v-tab>
      </template>
    </v-tabs>
    <v-tabs-items v-model="tab">
      <v-tab-item
        v-for="item in items"
        :key="item.tab"
        :value="'/'+ $route.params.office + '/contacts/' + $route.params.id + '/' + item.content + '?type=view'"
      >
        <v-card flat >
          <v-card-text class="horizontal-border">
            <nuxt-child  :contact="contact" />
          </v-card-text>
        </v-card>
      </v-tab-item>
    </v-tabs-items>
  </v-card>
</template>

<script>
  import TeamList from '~/components/team/list';
import ProfileQuickView from "~/components/contacts/ProfileQuickView";
import ContactView from "@/components/contacts/ContactView";
import {mapState} from "vuex";
  import {apiBaseUrl} from "@/env";
export default {
  layout: "main",
  components: {
    ProfileQuickView,
    ContactView,
    TeamList,
  },
  data() {
    return {
      assignAgentDialog: false,
      contact: this.$store.getters['contacts/getContact'],
      tab: null,
      items: [
        {
          tab: "Info",
          content: 'info'
        },
        {
          tab: "Conversations",
          content: "conversations"
        },
        {
          tab: "Behavior",
          content: 'behavior'
        }
      ]
    };
  },
  methods: {
    async assignAgent(selected){
      try {
        let url = `${ apiBaseUrl }agency/${ this.$store.state.agency.id }/${ this.$store.state.selectedOffice.id }/conversation/${ this.conversation.id }/assignAgent`

        const s = selected.map(s => s.id)

        const user_id = this.conversation.users.map(u => u.id).concat(s)

        await this.$axios.put(url, {
          user_id,
        })

        await this.$store.dispatch('conversation/getConversation', this.conversation.id)


        this.assignAgentDialog = false
      } catch (e) {
        if (e.response && e.response.data) {
          this.$vSnackbar({
            type: 'error',
            text: e.response.data.message,
          })
        }
      }

    },
  },
  computed: {
    ...mapState('conversation', ['conversations', 'conversationItems', 'conversationPagination']),
  },
  async fetch({store, params}){
    console.log(params.id)
    await store.dispatch('contacts/getContact', params.id)
    await store.dispatch('conversation/getConversations', {
      contact_id: params.id,
      params: {
        agency_id: store.state.agency.id,
        office_id: store.state.selectedOffice.id,
        page: 1,
      },
    })
  }
};
</script>
<style>
  .horizontal-border {
    border-top: 1px solid #ebeff2;
  }
  .vertical-border {
    border-left: 1px solid #ebeff2;
    height: 100%;
  }
</style>