How to properly designate Title for dynamic pages in VueJS?

Question

Frontend

// Router
{
    path: '/user/:id',
    name: 'User',
    component: User,

    meta: { title: ЗДЕСЬ НУЖНО ОБОЗНАЧИТЬ ID пользователя }
 }

I would also like to know how to correctly specify the title of the page in Vue? Now I am using the following design.

// App.vue
  import Menu from './components/Menu'

  export default {
    name: 'Artefact',
    components: {
      Menu
    },

    computed: {
      pageTitle() { return this.$route.meta.title; }
    },

    watch: {
      pageTitle: (val) => {
        document.title = val;
      }
    }, created() {
      document.title = this.$route.meta.title;
    }
  }

Answer 1

Use vue-meta

Answer 2

Why not use router.beforeEach
This will save you the competed i from watch
https://router.vuejs.org/ru/guide/advanced/navigat...

Answer 3

// App.vue
  import Menu from './components/Menu'

  export default {
    name: 'Artefact',
    components: {
      Menu
    },
    methods: {
      getPost() {
        fetch('db.json')
          .then(res => res.json())
          .then(users=> {
document.title = `user ${users.id}`;
.......
        })
      }
    },
    created() {
      this.getPost()
    }
  }