router link in kebab case

src/App.vue

@@ -6,8 +6,8 @@ import { RouterLink, RouterView } from 'vue-router'
   <header>
     <div class="wrapper">
       <nav>
-        <RouterLink to="/">Home</RouterLink>
+        <router-link to="/">Home</router-link>
-        <RouterLink to="/about">About</RouterLink>
+        <router-link to="/about">About</router-link>
       </nav>
     </div>
   </header>

src/use-cases/task/components/TaskList.vue

@@ -8,9 +8,9 @@ const taskStore = useTaskStore()
 <template>
   <ul class="task-list">
     <li v-for="task in taskStore.recentTasks" :key="task.id">
-      <RouterLink :to="{ name: 'task-view', params: { id: task.id } }">{{
+      <router-link :to="{ name: 'task-view', params: { id: task.id } }">{{
         task.title
-      }}</RouterLink>
+      }}</router-link>
       | {{ task.totalEstimation }} minutes |
       {{ formatDate(task.date) }}
     </li>

src/views/HomeView.vue

@@ -7,7 +7,7 @@ const taskStore = useTaskStore()
 
 <template>
   <main>
-    <RouterLink :to="{ name: 'new-task' }">New task</RouterLink>
+    <router-link :to="{ name: 'new-task' }">New task</router-link>
     <task-list />
     <button @click="() => taskStore.reset()">reset list</button>
   </main>