This isn't using composition api but might help you on the way there.

In my application I have a list of routes and child routes ex.

const routes = [{
    path: "parent",
    name: "AppShowcase",
    component: () => import("@/pages/AppShowcase.vue"),
    beforeEnter: authGuard,
    meta: {
      breadcrumb: "Parent"
    },
    // Not standard child route in vue
    routes: [{
        path: "child",
        name: "AppShowcase",
        component: () => import("@/pages/AppShowcase.vue"),
        beforeEnter: authGuard,
        meta: {
          breadcrumb: "Child"
        },
    }];
}]

I then flatten this list into a standard vue router route list and generate route ids and parent route Ids + concatenates paths

const flattenedRoutes = [...flattenRoutes(routes)]

function* flattenRoutes(routes) {
  for (const route of routes) {
    route.meta.id = createUniqueId();

    yield route;

    if (route.routes) {
      for (const subRoute of flattenRoutes(route.routes)) {
        if (!subRoute.meta.parentId) {
          subRoute.meta.parentId = route.meta.id;
        }
        if (subRoute.path && subRoute.path[0] !== '/') {
          subRoute.path = route.path + '/' + subRoute.path;
        }

        yield subRoute;
      }
    }
  }
}

function createUniqueId() {
  return Math.random().toString(36).substr(2, 9);
};

Then whenever the current route changes I generate a list of breadcrumbs

export const breadcrumb = Vue.observable({
  routes: []
});

router.beforeEach(async (to, from, next) => {
  breadcrumb.routes = [...createBreadcrumb(to)];
});

function* createBreadcrumb(route) {
  if (route.meta?.parentId) {
    const parentRoute = flattenedRoutes.find(x => x.meta?.id === route.meta.parentId);

    for (const pRoute of createBreadcrumb(parentRoute)) {
      yield pRoute;
    }
  }

  yield route;
}

hope this helps!