fix: use two words component name

src/components.d.ts

@@ -7,11 +7,11 @@ export {}
 
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
-    Counter: typeof import('./components/Counter.vue')['default']
-    Footer: typeof import('./components/Footer.vue')['default']
-    Input: typeof import('./components/Input.vue')['default']
     README: typeof import('./components/README.md')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
+    TheCounter: typeof import('./components/TheCounter.vue')['default']
+    TheFooter: typeof import('./components/TheFooter.vue')['default']
+    TheInput: typeof import('./components/TheInput.vue')['default']
   }
 }

src/layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
   <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
     <RouterView />
-    <Footer />
+    <TheFooter />
     <div class="mt-5 mx-auto text-center opacity-75 dark:opacity-50 text-sm">
       [Default Layout]
     </div>

src/layouts/home.vue

@@ -1,7 +1,7 @@
 <template>
   <main class="px-4 py-10 text-center text-gray-700 dark:text-gray-200">
     <RouterView />
-    <Footer />
+    <TheFooter />
     <div class="mt-5 mx-auto text-center opacity-75 dark:opacity-50 text-sm">
       [Home Layout]
     </div>

src/pages/hi/[name].vue

@@ -27,9 +27,9 @@ watchEffect(() => {
         <span opacity-75>{{ t('intro.aka') }}:</span>
         <ul>
           <li v-for="otherName in user.otherNames" :key="otherName">
-            <router-link :to="`/hi/${otherName}`" replace>
+            <RouterLink :to="`/hi/${otherName}`" replace>
               {{ otherName }}
-            </router-link>
+            </RouterLink>
           </li>
         </ul>
       </p>

src/pages/index.vue

@@ -30,7 +30,7 @@ const { t } = useI18n()
 
     <div py-4 />
 
-    <Input
+    <TheInput
       v-model="name"
       placeholder="What's your name?"
       autocomplete="false"