vue.js 動的にタイトルを変更

動的にタイトルを変更。
ブラウザで見ても反映されない場合があるが、
chromeのコンソールで見れば反映されているので安心

app.js

var routes = [
    { path: '/hoge/', component: () => import('./components/Hoge.vue') , meta: {title: '美味しいよ'} },
];


const app = new Vue({

    data () {
        return {
            title: 'へるぴーはママの味',
        };
    },

    methods: {

        //ページのタイトルを生成
        //へるぴーはママの味 | 美味しいよ ができあがる
        pageTitle(to){

            if(to.query.metaTitle){
                var setTitle = to.meta.title + ' | ' + this.title;
                document.title = setTitle;
            } else {
                // タイトルを設定
                if(to.meta.title){
                    var setTitle = to.meta.title + ' | ' + this.title;
                    document.title = setTitle;
                } else {
                    document.title = this.title;
                }
            }
        },

    },

    watch: {

        //移動する度に動作させる
        '$route'(to, from) {
            this.pageTitle(to);
        },

    },
});

axiosで動的に変更したい

hoge.vue

axios.post('/article/view/').then(e => {

    this.res = e.data.res;
    document.title = this.res.name + " | " + this.$root.title;//ユーザーネーム さんのプロフィール | へるぴーはママの味
}