vue动态修改route里的meta属性 ！求解答~~1

Question

动态修改router里的meta属性;

router.js
{
  path:'/detail',
  meta:{
    title:'详情',
    isnavbar:false,
    istabbar:false
  },
  components:()=>import('xxx.vue')
}
路由配置

默认route.js的meta里的配置;

App.vue
<navbar v-if="$route.meta.isnavbar" :title="$route.meta.title">
<section>
  <router-view/>
</section>
<tabbar v-if="$route.meta.istabbar" />

这是在app.vue页面，统一的一个头部和底部导航

detail.vue

<template>

</template>
<script>
export default {
  name:'detail',
  data(){
    return {
      title:''
    }
  },
  methods:{
   getDetail(){
    axios.get(xxxx).
    then(res=>{
        this.title = res.data.title;
    })
   }
  },
  create(){
    this.getDetail()
  },
  mounted(){
    this.$route.meta.title = this.title
  }
}
</script>

这里说一下，进入detail页面后navbar的title默认是'详情'，发送数据请求，获取到后端返回的title，保存到data里，然后在修改route.meta.title 为 this.title
这里在vue开发工具里能看到route.meta.title改变了，但是页面navbar里的title并没有更新。~ 求解！~

Answer 1

在created钩子函数中修改路由元信息。

Answer 2

更改title使用document.title = 'title'

Answer 3

"这里在vue开发工具里能看到route.meta.title改变了，但是页面navbar里的title并没有更新。"
楼主知道原因了吗