Почему при перезагрузке страницы в Nuxt 3 исчезает часть контента?

Question

[vladimirir]

Реализовал хлебные крошки в Nuxt 3. При изначальном заходе на страницу (после npm run dev) всё отображается корректно, но, если страницу перезагрузить (или сразу зайти на неё по адресу в адресной строке), то почему-то значения для breadcrumbs в template оказываются пустыми. Причём, если смотреть в скрипте через console.log, то видно что значения вычислились, то есть, они не пустые. Я предполагаю, что, возможно, это как-то связано с очерёдностью подгрузки компонентов. Компоненет Breadcrumbs у меня встроен в шаблон страницы. Если оборачиваю код компонента в шаблоне в , то даже при перезагрузке подгружается, но видно, что подгружается позже всего остального. Кто-нибудь знает, почему такое может быть? Код самого компонента ниже.

<template>
    <ul class="list list--breadcrumbs">
      <li class="list__item" v-for="(item,index) in breadCrumbs" :key="`breadcrumbs_${index}`">
        <NuxtLink class="link" :to="{name: item.to}" v-html="item.text"></NuxtLink>
      </li>
    </ul>
</template>

<script lang="ts" setup>
const route = useRoute()
const router = useRouter()
const { $event, $listen, $unListen } = useNuxtApp()
const breadCrumbs = ref(getBreadCrumbs(route).reverse())

// console.log(breadCrumbs, 'breadCrumbs: ')

$listen('change_breadcrumbs', () => {
  breadCrumbs.value = getBreadCrumbs(route).reverse();
  $unListen('change_breadcrumbs')
});

function getBreadCrumbs(current, breadcrumbs = []){
  if( !current.meta.parent ){
    breadcrumbs.push({
      text: current.meta.breadcrumb,
      to: current.name
    });
    return breadcrumbs;
  }else{
    breadcrumbs.push({
      text: current.meta.breadcrumb,
      to: current.name
    });
    return getBreadCrumbs(router.getRoutes().filter( route => route.name === current.meta.parent)[0], breadcrumbs);
  }
}
</script>