useNuxt2Meta values didn't update if values are computed

[antlionguard]

Environment

---

• Operating System: Windows_NT
• Node Version: v14.19.1
• Nuxt Version: 2.16.0-27616340.013f051b
• Package Manager: [email protected]
• Builder: webpack
• User Config: srcDir, alias, server, bridge, head, css, styleResources, plugins, buildModules, gtm, modules, postcss, tailwindcss, typescript, sentry, buefy, image, axios, proxy, render, i18n, router, build, serverHandlers, devServerHandlers
• Runtime Modules: @nuxt/[email protected], @nuxtjs/[email protected], [email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], [email protected], @nuxtjs/[email protected], [email protected]
• Build Modules: (), @pinia/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxtjs/[email protected], @nuxt/[email protected]

---

Reproduction

https://codesandbox.io/s/dreamy-maxwell-ir8qu1?file=/pages/index.vue

Describe the bug

Meta object values are not updating if object values (title, link, meta etc.) are computed.

Additional context

I cannot see browser title on codesandbox. Therefore i downloaded reproduction into my computer and i tested in locally.

Logs

No response

[oppianmatt]

we have this problem as well, very annoying. We found that if the head was already created before you call useNuxt2Meta it works. But if you try call useNuxt2Meta say in onServerPrefetch it doesn't work as needs a nuxt instance. So we created a component whose job is to call useNuxt2Meta and instantiate that when your head is ready from the parent. For example:

<template>
  <client-only />
</template>

<script setup lang="ts">
import { useNuxt2Meta } from '#imports'
import { PropType } from 'vue'

const props = defineProps({
  nuxt2meta: {
    type: Object as PropType<Parameters<typeof useNuxt2Meta>[0]>,
    required: true
  }
})

useNuxt2Meta(props.nuxt2meta)
</script>

then in the parent you do this:

    <nuxt-to-meta
      v-if="title"
      :nuxt2meta="headData"
    />