Vue3で動的にタイトルを変更したい

前提

Vue CLIを使って環境を作りました。

日本語ページと英語ページがあり、Vue3でSPAでページを変えるとタイトルを動的に変えたく、
参考サイトを見てプログラミングしたのですが、
タイトルがundefinedになってしまいます。

実現したいこと

タイトルを動的に変えたい。

該当のソースコード

src/router/index.ts

ts
1import { createRouter, createWebHashHistory } from 'vue-router'
2import JaView from '../components/JaView.vue'
3import EnView from '../components/EnView.vue'
4const routes = [
5    {
6        path: '/',
7        name: 'ja',
8        component: JaView,
9        meta: {
10            title: '日本語ページ'
11        }
12    },
13    {
14        path: '/en',
15        name: 'EnView',
16        component: EnView,
17        meta: {
18            title: '英語ページ'
19        }
20        // route level code-splitting
21        // this generates a separate chunk (about.[hash].js) for this route
22        // which is lazy-loaded when the route is visited.
23        // component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
24    },
25]
26const router = createRouter({
27    history: createWebHashHistory(),
28    routes
29})
30
31export default router
32

src/App.vue

ts
1<script lang="ts" setup>
2import { ref, onMounted } from 'vue'
3import { useRoute } from 'vue-router'
4import JaView from './components/JaView.vue'
5import EnView from './components/EnView.vue'
6
7const cur = ref<number>(0);
8onMounted(() => {
9    document.title = useRoute().meta.title
10    console.log(useRoute().meta.title);
11})
12</script>
13<template>
14    <div class="tab-wrap">
15        <input name="lang" id="tab_ja" type="radio" class="tab-switch" checked>
16        <router-link to="/"><label for="tab_ja" class="tab-label" v-on:click="cur=0" v-bind:class="{'tab-switch-active' : (cur === 0)}">日本語</label></router-link>
17        <input name="lang" id="tab_en" type="radio" class="tab-switch">
18        <router-link to="/en"><label for="tab_en" class="tab-label" v-on:click="cur=1" v-bind:class="{'tab-switch-active' : (cur === 1)}">英語</label></router-link>
19    </div>
20    <form>
21        <div class="contents">
22            <div v-show="cur === 0">
23                <JaView></JaView>
24            </div>
25            <div v-show="cur === 1">
26                <EnView></EnView>
27            </div>
28        </div>
29    </form>
30</template>
31