Missing parameter for vue-router when using beforeRouteEnter

Hello everybody,

I am using the vue-router to navigate through my SPA.

This is my router:

export default [{
    path: '/user',
    component: Layout2,
    meta: {
        requiresAuth: true
    },
    children: [
        {
            path: '/',
            name: 'user',
            component: () => /* webpackChunkName: "view-[request]" */ import('@/components/Index'),
            meta: {
                requiresAuth: true
            },
        },
        {
            path: ':id',
            name: 'user.view',
            component: () => /* webpackChunkName: "view-[request]" */ import('@/components/View'),
            meta: {
                requiresAuth: true
            },
        },
        {
            path: ':id/edit',
            name: 'user.edit',
            component: () => /* webpackChunkName: "view-[request]" */ import('@/components/Edit'),
            meta: {
                requiresAuth: true
            },
        },
    ]
}]

Now I added this:

<b-btn variant="primary" size="sm" :to="{ name: 'user.edit', params: { id: user.id }}">Edit</b-btn>

It's a part of vue-bootstrap.

I also make use of beforeRouteEnter:

data: () => ({
        user: {},
    }),
    beforeRouteEnter (to, _from, next) {
        axios
        .get ('/api/user/' + to.params.id).then ((resp) => {
            next ((vm) => {
                vm.user = resp.data.data;
            });
        });
    },

Alright - this seems to work - but I am receiving this warning:

[vue-router] missing param for named route "user.edit": Expected "id" to be defined

If I dump user.id in my component, 1 is being returned.

So now I am wondering: The component shouldn't be rendered if beforeRouteEnter is not finished, right? But why do I get this warning?