Динамические метатеги в Vue (открытый график)

Question

У меня есть приложение Vue.js, в котором я хочу использовать метатеги Open Graph для отображения некоторого контента (заголовок, описание, изображение), когда ссылка публикуется в социальных сетях (в основном, в Facebook).

Я использую vue-meta для отображения заголовка, где я использую шаблон заголовка, и эта часть работает хорошо (за исключением одной проблемы, которая может быть решена, когда это будет решено).

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.'}
  ]
}

},

Данные, которые я пытаюсь отобразить в тегах Open Graph, извлекаются из базы данных и сохраняются в объекте.

Когда я запускаю тест Open Graph (или пытаюсь поделиться ссылкой), он не получает никаких данных.

У меня есть мысль, что это может быть связано с тем, что это SPA, но я пока не занимаюсь веб-разработкой; поэтому мой вопрос.