useNuxt2Meta values didn't update if values are computed

Environment

Operating System: Windows_NT
Node Version: v14.19.1
Nuxt Version: 2.16.0-27616340.013f051b
Package Manager: yarn@1.22.18
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/image@0.6.2, @nuxtjs/sentry@5.1.7, nuxt-buefy@0.3.31, @nuxtjs/axios@5.12.5, @nuxtjs/proxy@2.1.0, cookie-universal-nuxt@2.2.1, @nuxtjs/i18n@7.2.3, nuxt-sweetalert2@1.0.0
Build Modules: (), @pinia/nuxt@0.3.1, @nuxtjs/eslint-module@3.1.0, @nuxtjs/style-resources@1.2.1, @nuxtjs/gtm@2.4.0, @nuxtjs/tailwindcss@4.2.1, @nuxtjs/dotenv@1.4.1, @nuxt/bridge@3.0.0-27657000.c87fdbe

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

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"
    />

nuxt / bridge