Overwrite ManifestsMeta Data - vuejs2

Question

I have a Manifest with stuff like name etc. which also instantly brings out meta tags for my page. Now I wanna use Meta Tags on my individual Pages, the problem is that the Manifest Meta Tags dont get overwritten which leads to them having higher priority for sites like Facebook etc.
Example Manifest:
manifest: {
theme_color: '#1a1a1a',
name: 'Stackoverflow',
short_name: 'SO',
description: 'Questions and Answers',
lang: 'de'
},
Example change in the Page:
head () {
return {
meta: [
{ name: 'og:url', content: 'www.notstackoverflow.com' },
{ name: 'og:type', content: 'article' },
{ name: 'og:title', content: this.post.titel },
{ name: 'og:description', content: this.post.subtitel },
]
}
},
The problem is that it still uses the title and description from the manifest instead of the page. It only adds the ones from the page after the manifest ones if I go on View Source.
(Nuxt + PWA Module)

Answer 1

you must add the hid property for each meta:
head () {
return {
meta: [
{ hid: 'og:url', name: 'og:url', content: 'www.notstackoverflow.com' },
{ hid: 'og:type', name: 'og:type', content: 'article' },
{ hid: 'og:title', name: 'og:title', content: this.post.titel },
{ hid: 'og:description', name: 'og:description', content: this.post.subtitel },
]
}
},
see https://nuxtjs.org/faq/duplicated-meta-tags
To avoid any duplication when used in child component, please give a unique identifier with the "hid" key.