Vue 3 Composition API vue-router 4 breadcrumbs?

Question

I am trying to create a breadcrumb component.

I made this before with Vue 2 but couldn't manage to do again with Vue 3 as some things have changed and there aren't any guides on how.

I made a very simple route and added meta:

  {
    path: "/:serviceId?/app-showcase",
    name: "AppShowcase",
    component: () => import("@/pages/AppShowcase.vue"),
    beforeEnter: authGuard,
    meta: {
      breadcrumb: "App Showcase", // For breadcrumbs in navbar
    },
  },

Want to have something like this:

Home / Services / fk39f / App Showcase

"fk39f" is a route param.

I was able to get the current route meta by:

<script>
...
const router = useRouter();
const route = router;

// Also getting some route params:
let serviceId = Number(route.currentRoute.value.params.serviceId);

</script>

<template>

<div class="bread-crumbs">
    {{ router.currentRoute.value.meta.breadcrumb }}
  </div>
...
</template>

Also user should be able to click to the breadcrumbs to go to that page. I tried some solutions like this but couldn't do it.

I couldn't find and solutions after searching for 2 hours.

If I can do this, I was also thinking of making a Vue 3 breadcrumbs library.

How can I achieve this?

Thanks!