have problem in adding dynamic meta tags in nuxtjs where I am using nuxt-property-decorator

Question

I have tried adding meta tags in nuxtjs using nuxt-property-decorator but only the title tag is added but no other meta tags are getting added

And also I used vue-meta package but also I am failed to resolve this issue

1. This is what my Code looks like:

   <script lang="ts">
   import { Component, Vue, Prop } from "nuxt-property-decorator";
   
   @Component({
         metaInfo:{
               title: 'Default  Title',
               titleTemplate: '%s | vue-meta Example App',
   
               meta: [
                   { charset: 'utf-8' },
                   { vmid: 'description', name: 'description', content: 'this is a description'}
               ]
           },
           components: {
   }
   })
       export default class HomePage extends Vue {
   }
   

From Above code adds only the title tag

2. Tried using Nuxtjs Documentation code:

<script lang="ts">
    import { Component, Vue, Prop } from "nuxt-property-decorator";

    @Component({
          head: {
    title: 'my website title',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      {
        hid: 'description',
        name: 'description',
        content: 'my website description'
      }
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
  

    },
 

components: {
        }
            })
   

    export default class HomePage extends Vue {
            }
        </script>

It doesn't adds any thing

3. Even Tried in this way this also didn't work

@Component({
                  head: {
            title: 'my website title',
            meta: [
              { charset: 'utf-8' },
              { name: 'viewport', content: 'width=device-width, initial-scale=1' },
              {
                hid: 'description',
                name: 'description',
                content: 'my website description'
              }
            ],
            link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }]
          }

4. other way added code in class. didn't work.

export default class PwHomePage extends Vue {
        

        head() {
      return {
        title: "Default  Title",
        meta: [
          {
            hid: 'description',
            name: 'description',
            content: 'Home page description'
          }
        ]
      }
        }

5. other way.

export default class PwHomePage extends Vue {
        

        metaInfo() {
  return {
    title: 'Default  Title',
    titleTemplate: '%s | vue-meta Example App',
    meta: [{
      vmid: 'description',
      name: 'description',
      content: "this.description",
    }]
  }
}
        }

Answer 1

Hey I solved this issue Just try this code.

@Component({
    asyncData({ params, error }): Promise<any> {
        ...
    },

    metaInfo(this: MyPageClass): object {
            return {
            title: this.myAsyncData,
            titleTemplate: '%s | vue-meta Example App',
            
            meta: [
              {name: 'description',content: 'This is Free Projects  Page'},
              {property:"og:title",content: "Epiloge - Build your network in your field of interest"},
              {property:"og:type",content: "website"},
              {name:"robots",content: "index, follow"},

            ],
            
       };
   }
})

class MyPageClass extends Vue {
    myAsyncData?: string

Thanks to FreekVR for your answer Link: