Define routes with nested child components under the base route ('/').
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)
Reproduction
https://gist.github.com/jenex-sletter/747e5d0f5cc903bb9422fb50d21bd032
Steps to reproduce the bug
1.Create a Vue 3 application with Vue Router 4.
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)