Nuxt: Dynamic og:image when generating static files - vue.js

Question

I am working on my first Nuxt project. I am trying to dynamically set the og:image URL by taking images of a post. In principle I am able to achieve this with the following code in the script
export default {
head() {
return {
title: this.post.title,
meta: [
{
hid: "description",
name: "description",
content: this.post.description,
},
{ hid: "og:title", property: "og:title", content: this.post.title },
{
hid: "og:description",
property: "og:description",
content: this.deck.description,
},
{ hid: "og:type", property: "og:type", content: "article" },
{
hid: "og:image",
property: "og:image",
content:
"https:[website]" +
require(`#/content${this.slug.dir}/images/preview.png`),
},
{
hid: "og:url",
property: "og:url",
content:
"https:[website]" + this.$route.fullPath,
},
],
};
},
async asyncData({ $content, params }) {
...
},
};
</script>
I notice the following:
On the browser page, when I open view source, these tags are not shown. However, the inspector shows the meta tags in the head .
This is as expected because, the view source is the base HTML head that is served from the backend, while the meta tags, the Nuxt JS must be dynamically adding on load.
I think we type the URL in a social media post like Facebook, WhatsApp, Twitter, LinkedIn, the manner it works is that only the head portion of the page is retrieved and the og parameters are retrieved to display the image. But the JS script is not executed.
And that is why I get a missing image error or a blank thumbnail.
The nuxt.config.js is as below
// nuxt.config.js
export default {
...
target: 'static',
...
ssr: false, // removing this makes no difference
...
}
Question is: how can I get Nuxt to add the meta tags in the generated HTML? Thanks