How to add dynamic opengraph meta data to page in NuxtJS

I am using NuxtJS with Nuxt3 and in my component, I want to update the head of the page with dynamic opengraph meta data. In my component, I am showing a gallery and for that I am fetching the data from an asynchronus API. Since I am facing data from API, so it is taking a little time to to mount the data in the component.

But, in the nuxt.config.ts file I have already defined the meta tags with hasd coded data for the website landing page or anyother page where I dont need to show dynamic opengraph meta data -

export default defineNuxtConfig({
  //SEO
  app: {
    head: {
      title: 'Talking Lands',
      charset: 'utf-8',
      viewport: 'width=device-width, initial-scale=1',

      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: '' },
        { hid: 'og-title', property: 'og:title', content: 'Vuetify + Nuxt'},
        { hid: 'og-type', property: 'og:type', content: 'website' },
        { hid: 'twitter-card', property: 'twitter:card', content: '' },
        { hid: 'og-image', property: 'og:image', content: 'https://new.example.com/static-assests/images/TLlogo_Dark.svg'},
        { hid: 'og-description', property: 'og:description', content: 'This is amazing example of opengaph protocols made using Nuxt and Vuetify'},
        { name: 'format-detection', content: 'telephone=no' }
      ],
    },
    pageTransition: { name: 'page', mode: 'out-in' },
  },
// ... other configurations

In the component I am using script setup and there I am updating the head with useHead property of NuxtJS like this -

<script setup>
// ... other code
useHead({
    title: projName,
    meta: [
        { hid: 'og-title', property: 'og:title', content: projName },
        { hid: 'og-image', property: 'og:image', content: projImage || 'loading-image-url' },
        { hid: 'og-description', property: 'og:description', content: projDescription }
    ],
})
// ...other code and api calls
<script>

projName, projDescription and projImage I am getting from API call and updating these in the useHead portion of the code. In the browser when I am running locally, the title in the browser tab is changing dynamically, but when I am inspecting elements in the browser og:title, og:image, ig:description is missing.

** And even is going missing sometimes -

<title></title>
<meta name="description" content>
<meta property="og:title" content="Vuetify + Nuxt">
<meta property="og:type" content="website">
<meta property="twitter:card" content>
<meta property="og:image" content="https://new.example.com/static-assests/images/TLlogo_Dark.svg">
<meta property="og:description" content="This is amazing example of opengaph protocols made using Nuxt and Vuetify">

It is not getting overridden with the updated dynamic meta data and here it is showing the meta data from nuxt.config.ts file only

I want it to update the html structure once i fetch the data from API and hence when sharing on facebook for different projects there should be dynamic different og meta data.

In what possible way I can manage to update the html structure so that open-graph can read the updated tags

pass a computed() to the useHead instead of a static value

in you Nuxt-Page-Component setup

const projName = ref('my project name') // your projName `Ref`

const computedPageMeta = computed(() => {
    return {
        title: projName.value,
        meta: [
            { hid: 'og-title', property: 'og:title', content: projName.value },
            ...
        ]
    };
});

useHead(computedPageMeta);

read the useHead document for more detail