$route, $router, useRoute and useRouter not accessible in child routes of the base route.

[jenex-sletter]

Reproduction

https://gist.github.com/jenex-sletter/747e5d0f5cc903bb9422fb50d21bd032

Steps to reproduce the bug

1.Create a Vue 3 application with Vue Router 4.
2. Define routes with nested child components under the base route ('/').
3. Attempt to access $route and $router in an early lifecycle (e.g. created hook) or access it directly in a nested child component (of the base route).

Expected behavior

$route and $router and useRoute and useRouter should be accessible in early lifecycle (e.g. created hook) of all components or direct access, including nested child components under the base route.

Actual behavior

$route and $router are not accessible in the created hook or early lifecycle and direct accessing of nested child components under the base route, but they are accessible in the mounted hook. But useRoute and useRouter are never directly accessed in the CompositionA API the component's setup() method.

Additional information

I am experiencing an issue where $route and $router are not accessible in nested child components during early lifecycle and direct access when using Vue Router 4, Any route that is a child of the base route (non-initial) that accesses the $route and $router in the options api or useRoute and useRouter in the Composition api the component's setup() method, it will throw an error, the initial child route of base route won't error, both navigating away and back to the route will then get error.
The problem seems related to the asynchronous nature of Vue Router 4.
(I am using a cdn for all vue and vue router 4 not build tools)

[posva]

You are using an outdated version of the libraries. Remove the @next from the urls

[jenex-sletter]

Ok, i have removed @next and added their versions:
https://unpkg.com/[email protected]/dist/vue.global.js
https://unpkg.com/[email protected]/dist/vue-router.global.js

It's the same, it doesn't work

[posva]

I tested it and it worked. the $route is accessible right after calling app.use(router) btw