when using Multiple Sidebars the sidebar not being updated

[userquin]

Describe the bug

just read the title

Reproduction

https://github.com/antfu/vite-plugin-pwa/tree/userquin/feat-new-theme

you can also disable pwa, just add disable: true option on VitePWA plugin here: https://github.com/antfu/vite-plugin-pwa/blob/userquin/feat-new-theme/docs/vite.config.ts#L53

from root folder run pnpm install && pnpm run build then pnpm run docs to start dev or pnpm run docs:preview to start preview

Expected behavior

The sidebar should update

System Info

Also failing on Netlify preview: https://github.com/antfu/vite-plugin-pwa/pull/304


System:
    OS: Windows 10 10.0.19044
    CPU: (16) x64 Intel(R) Core(TM) i9-9900K CPU @ 3.60GHz
    Memory: 42.87 GB / 63.95 GB
  Binaries:
    Node: 16.13.0 - C:\Program Files\nodejs\node.EXE
    npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 102.0.5005.115
    Edge: Spartan (44.19041.1266.0), Chromium (102.0.1245.41)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    vitepress: ^1.0.0-alpha.2 => 1.0.0-alpha.2

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.

[brc-dd]

Fix: collapsed should be a computed ref:

vitepress/src/client/theme-default/components/VPSidebarGroup.vue

Lines 15 to 21 in 107724a

	const collapsed = ref(props.collapsible && props.collapsed)
	function toggle() {
	if (props.collapsible) {
	collapsed.value = !collapsed.value
	}
	}

But what will be the toggle then?

[userquin]

add a watcher or just add a setter to the computed: https://vuejs.org/guide/essentials/computed.html#writable-computed

[userquin]

@brc-dd try adding this:

watchEffect(() => {
  collapsed.value = props.collapsible && props.collapsed
})