Можно ли использовать данные из запроса API в компоненте Vue в качестве заголовка страницы?

Question

Я создаю пользовательский модуль Drupal 8, который состоит из нескольких компонентов Vue, которые выполняют вызовы API и отображают списки или подробные представления на страницах. Я могу получить нужные мне данные, но я хочу обновить заголовок страницы, чтобы использовать значение (в данном случае meta.data.title) из вызова API, который я выполняю. Поскольку это компонент в пользовательском модуле Drupal 8, маршрутизация осуществляется в файле .routing.yml (как это принято в Drupal) без использования чего-либо вроде vue-router.

Я добавил миксин Vue, чтобы попытаться добавить заголовок, используя это руководство: https://tahazsh.com/vuebyte-change-page-title Если я жестко закодировал заголовок, этот заголовок корректно обновляется. Однако, когда я переключаюсь на использование meta.data.title в качестве заголовка, он возвращается как неопределенный. Я также попытался добавить вычисляемую переменную actualTitle и вытянуть туда заголовок. Когда я загружаю страницу, инструменты разработчика Vue показывают, что actualTitle получен правильно, но страница по-прежнему загружается с «неопределенным» заголовком.

Как я могу извлечь заголовок из данных в качестве заголовка страницы? Я предоставил несколько примеров кода ниже; они также доступны на GitHub: https://gist.github.com/KurtTrowbridge/f4a00b30193cc168a7dcbcc3c2ea490c

Detail.vue, мой компонент Vue:

<template>
  <div class="story-detail" v-bind:title="meta.data.title">

    <article>

      <div class="content-wrapper no-margin">
        <div class="page-content">
          <section class="section">
            <div class="page-type ts-h2 heading--underlined">News</div>
            <h1 class="page-title page-title--no-margin">{{ meta.data.title }}</h1>
            <!-- ... some other HTML is here but it's not important to this -->
          </section>
        </div>
      </div>

    </article>

  </div>
</template>

<script>
    import axios from 'axios'
    axios.defaults.baseURL = 'REDACTED';
    axios.defaults.headers.common['Authorization'] = 'Bearer REDACTED';
    axios.defaults.headers.post['Content-Type'] = 'application/json';
    export default {
        name: 'Detail',
        title () {
          return `${this.title}` // I tried this with actualTitle too and it didn't work
        },
        props: {
            id: {
              type: Number,
              required: true,
              // default: '1008218'
              default: window.location.href.split('/').pop()
            },
            url: {
              type: String,
              default: window.location.href
            }
        },
        computed: {
          actualTitle: function () {
            return this.meta.data.title // this shows up correctly in Vue dev tools
          }          
        },
        data() {
          return {
            info: null,
            content: null,
            meta: null,
            read_more: false,
            title: this.actualTitle // this doesn't seem to work, though if I hardcode a string, that shows up; this displays "undefined"
          };
        },
        mounted() {
            axios
            .get('/content/doc/' + this.id)
            .then(response => {
              this.content = response
            })
            axios
            .get('/search/doc/' + this.id)
            .then(response => {
              this.meta = response
            })     
        }
    }
</script>

title-mixin.js, через https://tahazsh.com/vuebyte-change-page-title:

function getTitle (vm) {
    const { title } = vm.$options
    if (title) {
        return typeof title === 'function'
        ? title.call(vm)
        : title
    }
}

export default {
    created () {
        const title = getTitle(this)
        if (title) {
        document.title = title
        }
    }
}

app.js:

    require("babel-polyfill");
}

import Vue from 'vue'
import detail from './components/Detail'
import titleMixin from './mixins/title-mixin'

window.onload = () => { // needed due to Drupal JS loading

    Vue.component('detail', detail)
    Vue.mixin(titleMixin)

    const app = new Vue({el: '#main-blocks'})
};