refactor: move script over template

src/pages/hi/[name].vue

@@ -1,3 +1,18 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { defineProps } from 'vue'
+
+const props = defineProps({
+  name: {
+    type: String,
+    require: true,
+  },
+})
+
+const router = useRouter()
+const { t } = useI18n()
+</script>
 
 <template>
   <div>
@@ -5,7 +20,7 @@
       <carbon-pedestrian class="inline-block" />
     </p>
     <p>
-      {{ t('intro.hi', {name}) }}
+      {{ t('intro.hi', { name: props.name }) }}
     </p>
     <p class="text-sm opacity-50">
       <em>{{ t('intro.dynamic-route') }}</em>
@@ -21,19 +36,3 @@
     </div>
   </div>
 </template>
-
-<script setup lang='ts'>
-import { useRouter } from 'vue-router'
-import { useI18n } from 'vue-i18n'
-import { defineProps } from 'vue'
-
-const props = defineProps({
-  name: {
-    type: String,
-    require: true,
-  },
-})
-
-const router = useRouter()
-const { t } = useI18n()
-</script>