vue-router を使用したルーティングができない。

実現したいこと

Vue3を使用したルーティング

前提と問題

Vue3を使ってSPAの挙動を試したいが出来なかった。
ボタンを押したら指定したパスのコンポーネントへ遷移する物を試しで作りたいがボタン以外は何も出ず、遷移がされません。

ご教授いただけると幸いです。

components/Drawing.vue
1<template>
2    <div>
3        <img src="imge_test/1200x630.png" alt="">
4        <hr>
5        <div class="d-flex justify-content-center">
6            <button>stop</button>
7            <button>back</button>
8            <button>next</button>
9        </div>
10    </div>
11</template>
12
13<script>
14export default {
15    name: 'Drawing'
16}
17</script>

components/Index.vue
1<template>
2    Top
3</template>
4
5<script>
6export default {
7    name: 'Index'
8}
9</script>

App.vue
1<template>
2  <div id="app">
3    <div>
4      <router-link to="/" class="btn btn-primary mx-2">
5        Top
6      </router-link>
7      <router-link to="/drw" class="btn btn-warning">
8        Drawing
9      </router-link>
10    </div>
11    <hr>
12    <router-view></router-view>
13  </div>
14</template>
15
16<script>
17export default {
18  name: 'App',
19}
20</script>

router.js
1import { createRouter, createWebHistory } from "vue-router";
2import Drawing from './components/Drawing.vue'
3import Index from './components/Index.vue'
4 
5export const router = createRouter({
6    history: createWebHistory(),
7    routes: [
8        {
9            path: '/',
10            name: 'index',
11            component: Index
12        },
13        {
14            path: '/drw',
15            name: 'Drawing',
16            component: Drawing
17        }
18    ]
19})

main.js
1import { createApp } from 'vue'
2import App from './App.vue'
3import './index.css'
4import { router } from './router'
5
6var app = createApp(App)
7app.use(router)
8createApp(App).mount('#app')
9