[Bug Report][3.6.5] The rail attribute of the VNavigationDrawer does not take effect when the encapsulated component is introduced.

[AndyBeat]

Environment

Vuetify Version: 3.6.5
Last working version: 3.5.18
Vue Version: 3.4.27
Browsers: Chrome 124.0.0.0
OS: Windows 10

Steps to reproduce

Click the list icon on the toolbar

Expected Behavior

The left navigation can be retracted

Actual Behavior

No change to left navigation

Reproduction Link

https://codesandbox.io/p/github/AndyBeat/vuetify-navigation-test/master?file=%2Fsrc%2FApp.vue%3A17%2C1

Other comments

The same navigation bar code, the drawer attribute takes effect normally when used externally, but it does not take effect when encapsulated into a separate interface nav-drawer. This problem was also found on the vuetify doc page of the same version.

There is no change after the first click. It shrinks after refreshing. Clicking again cannot restore the original state. After refreshing, it is normal.

[johnleider]

I really don't understand what you're trying to do and if this is an implementation issue or a bug.

[AndyBeat]

I think it's a bug. After all, versions before 3.5.18 don't do this. This is a dynamic diagram of the effects of the two versions. Can you understand it?

vuetify 3.6.0:

vuetify 3.4.3:

[AndyBeat]

My English is not very good, I hope you can understand me. See if this screenshot helps you understand

[KaelWD]

@johnleider this is the same problem we were looking at last week with the drawer not hiding on mobile.

[johnleider]

Where we are currently at with the issue:

This watcher isn't firing correctly:

vuetify/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx

Line 149 in 666484a

watch(isTemporary, val => !props.permanent && (nextTick(() => isActive.value = !val)))

When an application is resized, the isTemporary change that occurs from mobile.value isn't causing the watcher to fire:

vuetify/packages/vuetify/src/components/VNavigationDrawer/VNavigationDrawer.tsx

Line 137 in 666484a

const isTemporary = computed(() => !props.permanent && (mobile.value || props.temporary))

[KaelWD]

I couldn't figure out how to fix this, I'm reverting #15229 in 3.7 because suspense is clearly not ready to use yet.