Nuxt 3 individual page Meta data not detected

I have created my online portfolio using Nuxt 3. I followed the Nuxt 3 guide as well as watched a few tutorials online on adding Meta data to individual Nuxt 3 pages.

I have provided each page with a different meta description content. i.e. Home page - 'This is my Home page meta', About page - 'This is my About page meta'

My problem is, when I analyse each of my pages using online tools that check for Meta description data, it displays the Meta 'description' I have provided in my nuxt.config.js file. How can I make it so that any tool that analyses any of the pages in my online portfolio will get the relevant Meta description data related to that page?

Here's my nuxt.config.js file:

export default defineNuxtConfig ({
  app: {
    head: {
      meta: [
        { name: 'description', content: 'This is the fallback meta description' }
      ]
    }
  }
})

Here's the meta in my Home page:

<script setup>
  useHead({
    meta: [
      { name: 'description', content: 'This is my Home page meta description' }
    ]
  });
</script>

Here's the meta in my About page:

<script setup>
  useHead({
    meta: [
      { name: 'description', content: 'This is my About page meta description' }
    ]
  });
</script>

https://nuxt.com/docs/getting-started/seo-meta Use defineSeoMeta composable - this can be used globally on app.vue, and then on page level in your page components to override the global ones. There is also a defineServerSeoMeta, but I'm not actually sure why thats needed as from testing, it looks like the other still renders on the server too.

useServerSeoMeta({
  title: 'My Amazing Site',
  ogTitle: 'My Amazing Site',
  description: 'This is my amazing site, let me tell you all about it.',
  ogDescription: 'This is my amazing site, let me tell you all about it.',
  ogImage: 'https://example.com/image.png',
  twitterCard: 'summary_large_image',
})