Nuxt 3: SEO/Meta data from API not visible when sharing link on social media

I have a blog in Nuxt 3 and each blog content along with meta data is rendered through api response. The issue is when I share the blog on social media it do not show any meta data that received in API response but only show static meta data which is declared inside app.vue file. When I check meta tags through inspect elements tab in broweser dev tools, I can see all required data there.

// pages/blog/[slug].vue

<script setup>
import { onMounted, ref, defineProps } from 'vue';
import { useBlogStore } from '~/stores/blog';
import config from '~/app.config.ts'

const route = useRoute()
const blogStore = useBlogStore(); // Create an instance of the blog store
const blog = ref([]);
const { currentRoute } = useRouter();

onMounted(async () => {

  try {
    await blogStore.getBlog(route.params.slug); // Call the getBlogs action
    blog.value = blogStore.$state.blog; // Update the local ref with the fetched data
  } catch (error) {
    console.log(error);
  }

  useHead({
    title: blog.value.title,
    meta: [
      { name: 'description', content: blog.value.meta_description },
      { name: 'keywords', content: blog.value.keywords },
      { name: 'og:image', content: blog.value.image_url },
      { name: 'og:title', content: blog.value.title },
      { name: 'og:description', content: blog.value.meta_description },
      { name: 'og:type', content: 'article' },
      { name: 'og:url', content: config.web.baseURL + currentRoute.value.fullPath },
      { name: 'twitter:card', content: 'summary_large_image' },
      { name: 'twitter:url', content: config.web.baseURL + currentRoute.value.fullPath },
      { name: 'twitter:title', content: blog.value.title },
      { name: 'twitter:description', content: blog.value.meta_description },
      { name: 'twitter:image', content: blog.value.image_url },
    ],
  })
});
</script>

// app.vue

<script setup>
  definePageMeta({
    colorMode: 'dark',
  })

  useHead({
    title: 'My Title',
    meta: [
      { name: 'description', content: 'Nuxt app meta description for SEO!' },
      { name: 'theme-color', content: '#000000' },
    ],
  })
</script>