SEO Metadata ot updated in source code with nuxt 3

Question

I want to have some SEO metadata on my nuxt 3 project. I have the folowwing nuxt.config.ts :

export default defineNuxtConfig({
  ssr: false,
  devtools: { enabled: true },
  app: {
    head: {
      title: 'Connexion...',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        { hid: 'description', name: 'description', content: 'mywebsite' },
        { hid: 'og:title', name: 'og:title', content: 'test title' },
        { hid: 'og:description', name: 'og:description', content: 'my website' },
        { hid: 'og:type', name: 'og:type', content: 'website' },
        { hid: 'og:url', name: 'og:url', content: '/' },
        { hid: 'og:image', name: 'og:image', content: '/' },
        { hid: 'og:site_name', name: 'og:site_name', content: 'test title' },
        { hid: 'twitter:card', name: 'twitter:card', content: 'summary_large_image' },
        { hid: 'twitter:site', name: 'twitter:site', content: '@test' },
        { hid: 'twitter:title', name: 'twitter:title', content: 'test title' },
        { hid: 'twitter:description', name: 'twitter:description', content: 'my website' },
        { hid: 'twitter:creator', name: 'twitter:creator', content: '@test' },
        { hid: 'og:image', name: 'og:image', content: '/' },

      ],
      link: [
        { rel: 'icon', type: 'image/png', href: '/favicon.png' }
      ],
      script: [
        ...
      ]
    },
  },

So I have some metadata in my source code (on all pages) that are fixed. I can see them when I select "view source code" on chrome. What I want is for each page to have their own metadata, and I want the source code to change accordingly.

For example, in Home.vue

<template>
 <div>
   Hello world
 </div>
</template>

<script> 
export default defineNuxtComponent({
 setup() {
  useSeoMeta({
    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',
 })
}

})
</script>

I would expect the title, description, and so on... to change, and it does but not in the source code of the page. On the source code it's still the default metadata that i definied in nuxt.config.ts I have tried to use useHead but it's the same result.