Dynamic Meta tags in Vue (Open Graph)

Question

I have a Vue.js application where I want to use Open Graph Meta Tags to display some content (title, description, image) when a link is shared on social media (mainly facebook).

I use vue-meta to display the title where I use the title template, and that part works well (except one issue, that might be solved when this is solved).

metaInfo () {
return {
  titleTemplate: this.item.title + ' | %s',
  meta: [
    {property: 'og:title', content: ' | My Site'},
    {property: 'og:site_name', content: 'My Site'},
    // The list of types is available here: http://ogp.me/#types
    {property: 'og:type', content: 'website'},
    // Should the the same as your canonical link, see below.
    {property: 'og:url', content: 'https://www.my-site.com/my-special-page'},
    {property: 'og:image', content: 'https://www.my-site.com/my-special-image.jpg'},
    // Often the same as your meta description, but not always.
    {property: 'og:description', content: 'I have things here on my site.'}
  ]
}

},

The data I'm trying to display in the Open Graph tags, is retrieved from firebase and stores in a Object.

When I run a Open Graph test (or try sharing the link) it doesn't get any data.

I have a thought that it might have something todo with it being a SPA, but I'm not that into web developing yet; therefore my question.