Prop not passed down on nested components in dynamic routes

[Jesus82]

Environment

• Operating System: Darwin
• Node Version: v20.13.1
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: npm@10.5.2
• Builder: -
• User Config: components
• Runtime Modules: -
• Build Modules: -

Reproduction

• Run this repo with npm run dev
• Go to index and try to follow any of the links.

Video:
https://github.com/nuxt/nuxt/assets/8875832/c8d2cb13-08da-4e85-865f-302e97879801

Describe the bug

• The object passed down as a prop doesn't seem to be passed.
  [Vue warn]: Invalid prop: type check failed for prop "beerStyle". Expected Object, got Null

Additional context

This happens in any nested route and nested components when calling the $fetch method from a either from a composable or directly from the page. I also checked this answer, but here there is no context error in this case.

Logs

[Vue warn]: Invalid prop: type check failed for prop "beerStyle". Expected Object, got Null  
  at <BeerCard beer-style=null > 
  at <[slug] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <Anonymous key="/test/ale()" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/test/ale', path: '/test/ale', query: {…}, hash: '', name: 'test-slug', …}  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <App key=3 > 
  at <NuxtRoot>

[Vue warn]: Invalid prop: type check failed for prop "beerStyle". Expected Object, got Null  
  at <BeerDetails beer-style=null > 
  at <BeerCard beer-style=null > 
  at <[slug] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <Anonymous key="/test/ale()" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/test/ale', path: '/test/ale', query: {…}, hash: '', name: 'test-slug', …}  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <App key=3 > 
  at <NuxtRoot>

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core . 
  at <BeerDetails beer-style=null > 
  at <BeerCard beer-style=null > 
  at <[slug] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <Anonymous key="/test/ale()" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/test/ale', path: '/test/ale', query: {…}, hash: '', name: 'test-slug', …}  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <App key=3 > 
  at <NuxtRoot>

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://github.com/vuejs/core . 
  at <BeerDetails beer-style=null > 
  at <BeerCard beer-style=null > 
  at <[slug] onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy(Object) {__v_skip: true} > > 
  at <Anonymous key="/test/ale()" vnode= {__v_isVNode: true, __v_skip: true, type: {…}, props: {…}, key: null, …} route= {fullPath: '/test/ale', path: '/test/ale', query: {…}, hash: '', name: 'test-slug', …}  ... > 
  at <RouterView name=undefined route=undefined > 
  at <NuxtPage> 
  at <App key=3 > 
  at <NuxtRoot>
warn$1 @ chunk-6LRXACK2.js?v=b7822ff8:1512
logError @ chunk-6LRXACK2.js?v=b7822ff8:1724
handleError @ chunk-6LRXACK2.js?v=b7822ff8:1716
callWithErrorHandling @ chunk-6LRXACK2.js?v=b7822ff8:1661
flushJobs @ chunk-6LRXACK2.js?v=b7822ff8:1873
Promise.then (async)
queueFlush @ chunk-6LRXACK2.js?v=b7822ff8:1782
queuePostFlushCb @ chunk-6LRXACK2.js?v=b7822ff8:1802
queueEffectWithSuspense @ chunk-6LRXACK2.js?v=b7822ff8:3222
scheduler @ chunk-6LRXACK2.js?v=b7822ff8:3431
resetScheduling @ chunk-6LRXACK2.js?v=b7822ff8:517
triggerEffects @ chunk-6LRXACK2.js?v=b7822ff8:561
triggerRefValue @ chunk-6LRXACK2.js?v=b7822ff8:1316
set value @ chunk-6LRXACK2.js?v=b7822ff8:1361
finalizeNavigation @ vue-router.js?v=b7822ff8:2604
(anonymous) @ vue-router.js?v=b7822ff8:2514
Promise.then (async)
pushWithRedirect @ vue-router.js?v=b7822ff8:2482
push @ vue-router.js?v=b7822ff8:2408
navigate @ vue-router.js?v=b7822ff8:1644
callWithErrorHandling @ chunk-6LRXACK2.js?v=b7822ff8:1659
callWithAsyncErrorHandling @ chunk-6LRXACK2.js?v=b7822ff8:1666
invoker @ chunk-6LRXACK2.js?v=b7822ff8:10297
Show 21 more frames
Show less
BeerDetails.vue:3 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'name')
    at Proxy._sfc_render (BeerDetails.vue:3:80)
    at renderComponentRoot (chunk-6LRXACK2.js?v=b7822ff8:2350:17)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-6LRXACK2.js?v=b7822ff8:7466:46)
    at ReactiveEffect.run (chunk-6LRXACK2.js?v=b7822ff8:435:19)
    at instance.update (chunk-6LRXACK2.js?v=b7822ff8:7597:17)
    at setupRenderEffect (chunk-6LRXACK2.js?v=b7822ff8:7607:5)
    at mountComponent (chunk-6LRXACK2.js?v=b7822ff8:7375:7)
    at processComponent (chunk-6LRXACK2.js?v=b7822ff8:7329:9)
    at patch (chunk-6LRXACK2.js?v=b7822ff8:6795:11)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-6LRXACK2.js?v=b7822ff8:7473:11)

BeerDetails.vue:3 Uncaught (in promise) TypeError: Cannot read properties of null (reading 'name')
    at Proxy._sfc_render (BeerDetails.vue:3:80)
    at renderComponentRoot (chunk-6LRXACK2.js?v=b7822ff8:2350:17)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-6LRXACK2.js?v=b7822ff8:7466:46)
    at ReactiveEffect.run (chunk-6LRXACK2.js?v=b7822ff8:435:19)
    at instance.update (chunk-6LRXACK2.js?v=b7822ff8:7597:17)
    at setupRenderEffect (chunk-6LRXACK2.js?v=b7822ff8:7607:5)
    at mountComponent (chunk-6LRXACK2.js?v=b7822ff8:7375:7)
    at processComponent (chunk-6LRXACK2.js?v=b7822ff8:7329:9)
    at patch (chunk-6LRXACK2.js?v=b7822ff8:6795:11)
    at ReactiveEffect.componentUpdateFn [as fn] (chunk-6LRXACK2.js?v=b7822ff8:7473:11)
_sfc_render	@	BeerDetails.vue:3
renderComponentRoot	@	chunk-6LRXACK2.js?v=b7822ff8:2350
componentUpdateFn	@	chunk-6LRXACK2.js?v=b7822ff8:7466
run	@	chunk-6LRXACK2.js?v=b7822ff8:435
instance.update	@	chunk-6LRXACK2.js?v=b7822ff8:7597
setupRenderEffect	@	chunk-6LRXACK2.js?v=b7822ff8:7607
mountComponent	@	chunk-6LRXACK2.js?v=b7822ff8:7375
processComponent	@	chunk-6LRXACK2.js?v=b7822ff8:7329
patch	@	chunk-6LRXACK2.js?v=b7822ff8:6795
componentUpdateFn	@	chunk-6LRXACK2.js?v=b7822ff8:7473
run	@	chunk-6LRXACK2.js?v=b7822ff8:435
instance.update	@	chunk-6LRXACK2.js?v=b7822ff8:7597
setupRenderEffect	@	chunk-6LRXACK2.js?v=b7822ff8:7607
mountComponent	@	chunk-6LRXACK2.js?v=b7822ff8:7375
processComponent	@	chunk-6LRXACK2.js?v=b7822ff8:7329
patch	@	chunk-6LRXACK2.js?v=b7822ff8:6795
mountChildren	@	chunk-6LRXACK2.js?v=b7822ff8:7043
mountElement	@	chunk-6LRXACK2.js?v=b7822ff8:6950
processElement	@	chunk-6LRXACK2.js?v=b7822ff8:6915
patch	@	chunk-6LRXACK2.js?v=b7822ff8:6783
componentUpdateFn	@	chunk-6LRXACK2.js?v=b7822ff8:7473
run	@	chunk-6LRXACK2.js?v=b7822ff8:435
instance.update	@	chunk-6LRXACK2.js?v=b7822ff8:7597
setupRenderEffect	@	chunk-6LRXACK2.js?v=b7822ff8:7607
mountComponent	@	chunk-6LRXACK2.js?v=b7822ff8:7375
processComponent	@	chunk-6LRXACK2.js?v=b7822ff8:7329
patch	@	chunk-6LRXACK2.js?v=b7822ff8:6795
componentUpdateFn	@	chunk-6LRXACK2.js?v=b7822ff8:7473
run	@	chunk-6LRXACK2.js?v=b7822ff8:435
instance.update	@	chunk-6LRXACK2.js?v=b7822ff8:7597
setupRenderEffect	@	chunk-6LRXACK2.js?v=b7822ff8:7607
mountComponent	@	chunk-6LRXACK2.js?v=b7822ff8:7375
processComponent	@	chunk-6LRXACK2.js?v=b7822ff8:7329
patch	@	chunk-6LRXACK2.js?v=b7822ff8:6795
patchSuspense	@	chunk-6LRXACK2.js?v=b7822ff8:2882
process	@	chunk-6LRXACK2.js?v=b7822ff8:2679
patch	@	chunk-6LRXACK2.js?v=b7822ff8:6820
componentUpdateFn	@	chunk-6LRXACK2.js?v=b7822ff8:7553
run	@	chunk-6LRXACK2.js?v=b7822ff8:435
instance.update	@	chunk-6LRXACK2.js?v=b7822ff8:7597
callWithErrorHandling	@	chunk-6LRXACK2.js?v=b7822ff8:1659
flushJobs	@	chunk-6LRXACK2.js?v=b7822ff8:1873