open graph tags are not shown properly in nuxt static site generation when I share on social media

I'm trying to add social sharing to my muxt.js website through opengraph meta tags. All the tags are generated but when I share a link to my website on any social media nothing is shown. I statically generate via nuxt generate command.

this is the head in my nuxt.config.js:

 head: {
    title: 'Halabja Group',
    htmlAttrs: {
      lang: 'en'
    },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: "Halabja Group Companies was founded in 2006 by Mr. Aso Mohammed Ali Bamoki." },
      { name: 'format-detection', content: 'telephone=no' },
      { hid: 'page-title', property: 'og:title', content: 'Halabja Group' },
      { hid: "page-site-name", property: 'og:site_name', content: 'Halabja Group' },
      { hid: "page-og:description", property: 'og:description', content: 'Halabja Group Companies was founded in 2006 by Mr. Aso Mohammed Ali Bamoki.' },
      { hid: "page-og:img", property: 'og:img', content: '~/assets/images/hg banner.jpeg' },
      { name: 'keywords', content: 'Halabja Group, Aso Brick Factory, Hilal Bricks, Garden City, Halabja Concrete' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },

and this is the head in one of the dynamic pages _projects.vue where I'm trying to override the default values

head() {
    return {
      title: this.projects[this.params.projects].title,
      meta: [
        {
          name: "keywords",
          content:
            "Garden City, Villas, apartments, town house, real estate, Kirkuk, Sulaimaniyah, Baghdad, Ramadi",
        },
        {
          name: "keywords",
          content:
            "گاردن سیتی، ڤێلا، شوقە، تاون هاوس، عقارات، نوسینگە، کەرکوک، سلێمانی، بغداد، رومادی",
        },
        {
          hid: "description",
          name: "description",
          content: this.projects[this.params.projects].about.substr(0, 100),
        },
        { hid: "page-title", property: "og:title", content: "Garden City" },
        {
          hid: "page-site-name",
          property: "og:site_name",
          content: "Garden City",
        },
        {
          hid: "page-og:description",
          property: "og:description",
          content: this.projects[this.params.projects].about.substr(0, 100),
        },
        {
          hid: "page-og:img",
          property: "og:img",
          content: this.projects[this.params.projects].headerImg,
        },
        // { property: 'og:img', content: require('~/assets/images/about/1000m bb.jpg') },
      ],
    };
  },

and this is the headerImg in this object:

Villas: {
          title: "Villas",
          about: `The third zone at Garden City which consists of the villas is the most luxurious and exclusive zone of the project.  Attention to detail by a team of talented and experienced engineers is what sets this project apart from every other housing project in the city and the region in general. The exclusivity of this zone is due to the lack of commercial area within the gated community, which limits public access into the development and therefore fosters tight security for the residents. Nonetheless, the development features top-of-the-line private amenities inside the villas as well as public amenities in the common areas such as a football field, a tennis court, kids play area, and beautiful water features.`,
          headerImg: `/img/villas/type-a/17.jpg`,
          aboutImg: `/img/villas/type-a/16.jpeg`,
          services: [],
          videoLink: "",
          types: [
            {
              id: 1,
              img: `/img/villas/type-a/g.jpeg`,
              tag: "Type A",
              title: "240m²",
            },
            {
              id: 2,
              img: `/img/villas/type-b/g.jpeg`,
              tag: "Type B",
              title: "480m²",
            },
            {
              id: 3,
              img: `/img/villas/type-c/g.png`,
              tag: "Type C",
              title: "600m²",
            },
            {
              id: 4,
              img: `/img/villas/type-d/g.png`,
              tag: "Type D",
              title: "1000m²",
            },
          ],
        },

when I use facebooks tool to debug, it detects _nuxt/img/logo.7e545e2.png as the og:image which is not correct and doesn't even show it.

I've run out of ideas to solve it.