Vue meta not getting updates

Question

When I visit my internal pages vue-meta will not get updated by new page values.

Code

app.js

import VueMeta from 'vue-meta'
Vue.use(VueMeta, {
    refreshOnceOnNavigation: true
})

App.vue (main component)

export default {
  metaInfo() {
    return {
      title: process.env.MIX_APP_NAME,
      titleTemplate: `%s | ${process.env.MIX_APP_NAME}`,
      meta: [
        { name: "robots", content: "index,follow" },
        {
          vmid: "description",
          name: "description",
          content:
            "..........",
        },
        // and many more....
      ],
   }
  }
}

post.vue (internal component)

export default {
  name: "singePost",
  data() {
    return {
      post: "",
    };
},
metaInfo() {
    return {
        title: this.post.name, // not receiving data
        meta: [
            {
                vmid: "description",
                name: "description",
                content: this.post.metas[0].description, // not receiving data
            },
            // others......
        ],
    }
},
mounted() {
    this.getPost();
},
methods: {
    getPost() {
        axios
        .get("/api/articles/" + this.$route.params.slug, {
          headers: {
            Authorization: localStorage.getItem("access_token"),
          },
        })
        .then((response) => {
          this.post = response.data.data;
        })
        .catch((error) => {
            //....
        });
    },
},

Any idea?

Update

By the time I published this question it was about not getting updated then after doing some researches I've and playing around with my code I've realized that my vue-meta gets updated but, late and it causes social network websites and SEO checkers not be able to retrieve my URLs correctly.

Clarify

1. Vue-meta gets update but late
2. This late update causes SEO not be presented by the time link being shared and validate.

My full meta tags code

metaInfo() {
    return {
      title: this.post.name,
      meta: [
        {
          vmid: "keyword",
          name: "keyword",
          content: this.post.metas[0].tags,
        },
        {
          vmid: "description",
          name: "description",
          content: this.post.metas[0].description,
        },
        // Open Graph / Facebook
        { vmid: "og:type", name: "og:type", content: "website" },
        {
          vmid: "og:url",
          name: "og:url",
          content: process.env.MIX_APP_URL + this.$router.currentRoute.fullPath,
        },
        {
          vmid: "og:site_name",
          name: "og:site_name",
          content: `"${process.env.MIX_APP_NAME}"`,
        },
        {
          vmid: "og:title",
          name: "og:title",
          content: this.post.name,
        },
        {
          vmid: "og:description",
          name: "og:description",
          content: this.post.metas[0].description,
        },
        {
          vmid: "og:image",
          name: "og:image",
          content: this.post.imagebig,
        },
        //   Twitter
        {
          vmid: "twitter:card",
          name: "twitter:card",
          content: "summary",
        },

        {
          vmid: "twitter:author",
          name: "twitter:author",
          content: "@xxxxxx",
        },
        {
          vmid: "twitter:site",
          name: "twitter:site",
          content: "@xxxxxx",
        },
        {
          vmid: "twitter:creator",
          name: "twitter:creator",
          content: "@xxxxxx",
        },
        {
          vmid: "twitter:url",
          name: "twitter:url",
          content: process.env.MIX_APP_URL + this.$router.currentRoute.fullPath,
        },
        {
          vmid: "twitter:title",
          name: "twitter:title",
          content: this.post.name,
        },
        {
          vmid: "twitter:description",
          name: "twitter:description",
          content: this.post.metas[0].description,
        },
        {
          vmid: "twitter:image",
          name: "twitter:image",
          content: this.post.imagebig,
        },
      ],
    };
},

Extra

1. Recently I've read an article that because vue-meta (Vue in general) loads based on JavaScript Social media crawlers will not cache them therefore it's impossible to see my link details when I share them in FB or Twitter etc.

2. The suggested solution there was to use Nuxt and return meta data server side.

Questions

1. I'm not sure how much #1 above is correct but its a possibility
2. My app in general doesn't use Nuxt but I just installed npm package of it so it might be worth to try (as I mentioned I never used Nuxt so if that's the case of your helping solution I would be appreciate if you include a bit extra details into your answers about that).

Answer 1

Vue itself is client-side JS framework. When you build, your index.html does not have any content - only JS that generates the content when executed. Same applies to VueMeta. Problem is, when you are sharing links (FB, Twitter etc), they download linked page by using their own bot (crawler essentially) and analyze the content without executing any JS inside - so yes, they don't see any meta generated by VueMeta...

Only solution to this is to deliver fully (or partially) prerendered page containing all important information without executing JS

One way of doing so is to use Vue server side rendering - and you are right, frameworks like Nuxt use exactly that.

Generally there are two flavors:

SSR - page is rendered at the moment it is requested by the client (or bot). In most cases it requires running Node server (because Vue SSR is implemented in JS). Most prominent example of this is Nuxt.js

SSG - server side generation. Pages are generated at build time including all HTML. When loaded into the browser server returns HTML + all the JS/CSS but when it loads it's the same Vue SPA. You don't need Node server for that so you can host on CDN or any static hosting service like Netlify. Examples in Vue world are Gridsome, VuePress, Nuxt can do it too...

Note: there are other ways for example using headless chrome/puppeteer or services like https://prerender.io/

Nuxt

As said before, Nuxt is great but is very opinionated about how your app is structured (file based routing), how to get data etc. So switching to Nuxt can mean a complete app rewrite. On top of that it requires running NODE server which has consequences of its own (hosting).

BUT it seems to me that you are already using server - Laravel. So your best bet is probably to implement your meta rendering directly in Laravel.

UPDATE: It seems it is possible to do Vue SSR directly in Laravel