Issue with useServerHead or useHead with Vue 2.7 + Vite + Vue Router

[antsteyeragorize]

Hello ! Hope you're doing well.

I'm trying to setup a SSR POC with Vue 2.7, Vite and Vue router in order to migrate a big business app from Webpack to Vite.

I have a weird behavior when using useServerHead or useHead and vue router. I don't know what's the issue here, but after the first call to the server, the meta seems to be lost. It only works on first page called.

Here the codesandbox.

Don't hesitate to check the README for the step to reproduce.

[Remzi1993]

@harlan-zw Is still an issue?

[greetfish]

I also meet this issue in NUXT 3.5

const nuxtApp = useNuxtApp();
const route = useRoute();
const merchandise = ref({
  localImage: {},
  richArray: [],
});
await useAsyncData(() =>
  $fetch('/api/public/get_detailPage', {
    method: 'post',
    body: { locale: locale.value, id: route.params.id, pageType: 10 },
    onResponse({ response }) {
      if (response._data.code === 200) {
        merchandise.value = response._data.data;
        console.log(merchandise.value);
        gltf.value = merchandise.value.d3;
      }
    },
  })
);

useHead({
  title: merchandise.value.title,
  meta: [
    { name: 'description', content: merchandise.value.keyword },
    { name: 'title', content: merchandise.value.title },
  ],
  link: [
    {
      rel: 'canonical',
      href: siteUrl() + (locale.value === 'en-us' ? '' : '/' + locale.value + '/products/' + merchandise.value.id),
    },
  ],
  script: [
    {
      type: 'application/ld+json',
      innerHTML:
        '{' +
        '"@context": "http://schema.org",' +
        '"@type": "BreadcrumbList",' +
        '"itemListElement":[' +
        '{' +
        '"@type": "ListItem",' +
        '"position": 1,' +
        '"item": {' +
        '"name": "首页",' +
        '"@id": "' +
        siteUrl() +
        (locale.value === 'en-us' ? '' : '/' + locale.value) +
        '"' +
        '}' +
        '},' +
        '{' +
        '"@type": "ListItem",' +
        '"position": 2,' +
        '"item": {' +
        '"name": "' +
        nuxtApp.$i18n.t('news.news') +
        '",' +
        '"@id": "' +
        siteUrl() +
        (locale.value === 'en-us' ? '' : '/' + locale.value + '/news') +
        '"' +
        '}' +
        '}' +
        ']' +
        '}',
    },
  ],
});

after first request from server,it gos well.

a seconds later,it shows undefine.

[greetfish]

你好，你的来信我已收到