title: Dynamic Meta tags in Vue (Open Graph)
body: <p>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).</p>
  
  <p>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).</p>
  
  <pre><code>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.'}
    ]
  }
  </code></pre>
  
  <p>},</p>
  
  <p>The data I'm trying to display in the Open Graph tags, is retrieved from firebase and stores in a Object.</p>
  
  <p>When I run a Open Graph test (or try sharing the link) it doesn't get any data.</p>
  
  <p>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.</p>