Version

3.2.0-beta.2

Reproduction link

https://github.com/AlexandreBonaventure/vue3.2-bug (updated to use 3.2.0-beta.2)

Steps to reproduce

This issue is a follow-up on: https://github.com/vuejs/vue-next/issues/4148 Seems like the fix is not entirely comprehensive because I was able to reproduce with the new beta version by adding another route wrapper component

What is expected?

no errors

What is actually happening?

error

Also reproducible with a much simpler version similar to https://github.com/vuejs/vue-next/issues/4148#issuecomment-882697559

import { h } from 'vue';
import { createRouter, createWebHistory, RouteRecordRaw, RouterView } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/',
    component: { render: () => h(RouterView)},
    children: [
      {
        name: 'a',
        path: 'a/:id',
        component: () => import('./ARoute.vue'),
      },
      {
        name: 'b',
        path: 'b',
        component: { render: () => h('div', 'B content') },
      },
    ]
  },
];

export const router = createRouter({
  history: createWebHistory(),
  routes,
})

ARoute.vue

<template>
  <pre>{{ $route.params.id.toUpperCase() }}</pre>
</template>

App.vue

<template>
  <nav class="flex pa4" style="gap: 30px">
    <RouterLink :to="{ name: 'a', params: { id: 'test' } }">Go to A</RouterLink>
    <RouterLink :to="{ name: 'b' }">Go to B</RouterLink>
  </nav>
  <RouterView />
</template>

I could reproduce this without Vue Router but I'm unsure if that usage of the computed makes sense.

It seems the computed change introduces too many edge cases and is too risky so I reverted it to the old behavior :/