refactor: migrate to <script setup>

src/components/AppBreadcrumb.vue

@@ -1,3 +1,28 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import router from '@/router'
+
+const breadcrumbs = ref()
+
+const getBreadcrumbs = () => {
+  return router.currentRoute.value.matched.map((route) => {
+    return {
+      active: route.path === router.currentRoute.value.fullPath,
+      name: route.name,
+      path: `${router.options.history.base}${route.path}`,
+    }
+  })
+}
+
+router.afterEach(() => {
+  breadcrumbs.value = getBreadcrumbs()
+})
+
+onMounted(() => {
+  breadcrumbs.value = getBreadcrumbs()
+})
+</script>
+
 <template>
   <CBreadcrumb class="my-0">
     <CBreadcrumbItem
@@ -9,38 +34,4 @@
       {{ item.name }}
     </CBreadcrumbItem>
   </CBreadcrumb>
-</template>
-
-<script>
-import { onMounted, ref } from 'vue'
-import router from '@/router'
-
-export default {
-  name: 'AppBreadcrumb',
-  setup() {
-    const breadcrumbs = ref()
-
-    const getBreadcrumbs = () => {
-      return router.currentRoute.value.matched.map((route) => {
-        return {
-          active: route.path === router.currentRoute.value.fullPath,
-          name: route.name,
-          path: `${router.options.history.base}${route.path}`,
-        }
-      })
-    }
-
-    router.afterEach(() => {
-      breadcrumbs.value = getBreadcrumbs()
-    })
-
-    onMounted(() => {
-      breadcrumbs.value = getBreadcrumbs()
-    })
-
-    return {
-      breadcrumbs,
-    }
-  },
-}
-</script>
+</template>