Vue3 Router - параметры всегда пусты

В настоящее время я создаю навигационную защиту для приложения, и для простоты кода я буду издеваться над некоторыми данными.

export function useNavigationGuard() {
    return async (to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {

        const canNavigate = false;
        if (!canNavigate) {
            console.info('forbidden');
            return next({ name: '/forbidden', params: { to: to.fullPath } });
        }
        return next();
    };
}

Затем я получаю это на своей запрещенной странице

<template>
    <span class = "text-h6">You are not allowed to acces this resource</span>
</template>
<script setup lang = "ts">
export interface IForbiddenViewComponentProperties {
    to?: string;
}
const componentProperties: IForbiddenViewComponentProperties = withDefaults(
    defineProps<IForbiddenViewComponentProperties>(),
    {},
);
</script>

Это запрещенный маршрут:

{
    path: '/forbidden',
    name: '/forbidden',
    props: useRouteParamsAsProperties,
    component: () => import('@views/forbidden/index.vue'),
},

а вот компонуемый useRouteParamsAsProperties

import { RouteLocationNormalized } from 'vue-router';

export function useRouteParamsAsProperties(route: RouteLocationNormalized) {
    const { params } = route;
    return {
        ...params,
    };
}
export default useRouteParamsAsProperties;

Но когда я пытаюсь проверить свойство в свойстве моего компонента, оно всегда не определено.

Любые идеи, почему?