更改vuerouter的meta为何在dom中不成功呢？

<template>
  <div>
    <router-view></router-view>
    <div>{{ $route.meta }}</div>
    <button @click="clickFN">点我</button>
  </div>
</template>

<script>
export default {
  name: 'WorkspaceJsonApp',

  data() {
    return {}
  },

  mounted() {},

  methods: {
    clickFN() {
      this.$route.meta.abc = 321
      console.log(this.$route.meta.abc)
    }
  }
}
</script>

<style lang="scss" scoped></style>

这是route代码

import VueRouter from 'vue-router'
import Vue from 'vue'
Vue.use(VueRouter)
const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: () => import('../components/abc.vue'),
      meta: { abc: 123 }
    }
  ]
})
export default router

我想点击button将route.meta.abc更改成321，点击之后 console.log显示已经成功更改成321了但是页面还是显示123这是怎么回事呢？

在beforeEach修改

试下

this.$nextTick(() => {
               // dom元素更新后执行，因此这里能正确打印更改之后的值
                  console.log(this.$route.meta.abc)
        })