[Bug report] Vuepress cannot use Responsive sidebar & navbar in Vue 3.4 or higher

[LdoDoeg222]

Description

When I use vue 3.4.0 and then run pnpm docs:dev, and then open my local vuepress site, the navbar and sidebar will lose their responsive capability.
当我用 vue 3.4.0 并且运行 pnpm docs:dev，再打开本地的 Vuepress 网页时，顶部导航和侧边栏都会失去它们的响应性。

The guide in guide of vuepress tells me to install vue normally like pnpm add -D vue
在官方文档中提到的方法，只是简单地让我直接安装 vue——pnpm add -D vue

This situation is the same in higher version (3.4.14, which is the lastest version)
同样的情况（指失去响应性）当然也发生在了更高版本。

However, if i install vue 3.3.13 like the official documents do, it will run responsively.
然而，如果我像官方文档里写的一样，为我的 vuepress 安装 vue 3.3.13，又可以成功运行了。

This problem may caused by the update of vue 3.4, which added some breaking features.
这可能是因为 vue3.4 的更新带来了一些新特性。

Reproduction

https://github.com/LdoDoeg222/vuepress-bugrepo

Used Package Manager

pnpm

System Info

System:
    OS: Windows 10 10.0.19045
    CPU: (12) x64 Intel(R) Core(TM) i7-10750H CPU @ 2.60GHz      
    Memory: 5.79 GB / 15.80 GB
  Binaries:
    Node: 18.14.2 - D:\Program Files\nodejs\node.EXE
    Yarn: Not Found
    npm: 9.5.0 - D:\Program Files\nodejs\npm.CMD
  Utilities:
    Git: 2.39.0.
  Browsers:
    Chrome: 94.0.4606.71
    Edge: Chromium (120.0.2210.133)
  npmPackages:
    @vuepress/bundler-vite: 2.0.0-rc.0 => 2.0.0-rc.0
    @vuepress/bundler-webpack: Not Found
    @vuepress/cli: Not Found
    @vuepress/client: 2.0.0-rc.0 => 2.0.0-rc.0
    @vuepress/core: 2.0.0-rc.0 => 2.0.0-rc.0
    @vuepress/markdown: Not Found
    @vuepress/plugin-active-header-links: Not Found
    @vuepress/plugin-back-to-top: Not Found
    @vuepress/plugin-container: Not Found
    @vuepress/plugin-docsearch: Not Found
    @vuepress/plugin-external-link-icon: Not Found
    @vuepress/plugin-git: Not Found
    @vuepress/plugin-google-analytics: Not Found
    @vuepress/plugin-medium-zoom: Not Found
    @vuepress/plugin-nprogress: Not Found
    @vuepress/plugin-palette: Not Found
    @vuepress/plugin-prismjs: Not Found
    @vuepress/plugin-pwa: Not Found
    @vuepress/plugin-pwa-popup: Not Found
    @vuepress/plugin-register-components: Not Found
    @vuepress/plugin-search: Not Found
    @vuepress/plugin-shiki: Not Found
    @vuepress/plugin-theme-data: Not Found
    @vuepress/plugin-toc: Not Found
    @vuepress/shared: Not Found
    @vuepress/theme-default: 2.0.0-rc.0 => 2.0.0-rc.0
    @vuepress/utils: Not Found
    vue: 3.4.0 => 3.4.0
    vue-loader: Not Found
    vue-router: Not Found
    vuepress: 2.0.0-rc.0 => 2.0.0-rc.0
    vuepress-vite: Not Found
    vuepress-webpack: Not Found

[Mister-Hope]

closing as invalid

There are multiple Vue versions in your project.

Everything works fine at VuePress-theme-hope with vue3.4

[LdoDoeg222]

Mutiple vue version situation may caused by reproduction when running pnpm install [email protected] and pnpm install [email protected]
I deleted local /node_modules and use npm to reproduce it.

And you can check the reproduction again.

[zr9883]

解决了吗？我碰到了和你同样的问题

import { defaultTheme, defineUserConfig } from 'vuepress'

export default defineUserConfig({
title: '左上角标题',
theme: defaultTheme({
sidebar: {
'/test/': [
{
text: '标题测试',
children: ['/test/test1', '/test/test2']
}
]
}
})
})

[zr9883]

感谢，终于解决了这个问题，安装了 vue 3.3.13版本（npm install [email protected] --save-dev），之前默认是安装 3.4版本，这个问题我研究了挺久的，一直没发现是 vue 版本问题

[Mister-Hope]

@meteorlxy CC, I also encountered some issue when upgrading to Vue3.4 now, we need to make new versions to land to fix this problem.

@vuepress/shared is using @vue/shared as deps, and it's likely to have 2 different @vue/shared version installed even user are declaring a different vue in his deps.

[Mister-Hope]

@meteorlxy I managed to figure out how this happens, in Vue3.4 the reactivity system is rewritten. See https://blog.vuejs.org/posts/vue-3-4#more-efficient-reactivity-system.

We previously called composition Api hooks like useRouter and userRoute in computed functions, and this works in Vue3.3 and below, while in Vue3.4, these compostion api somehow will return undefined in some cases.

This issue could be solved by moving out the router and route declarations outside the computed:

// before
const sidebar = computed(() => 
  resolveSidebar() // called useRouter and useRoute inside it
)

// after
const router = useRouter()
const route = useRoute()

const sidebar = computed(() => 
  resolveSidebar(router, route)
)

I am not sure if this should be the correct fix, but the change is valid and the direction should be correct. Vue3.4 does have different activity with composition api calls inside computed getter functions.

May need you take a deeper look at this.

[Mister-Hope]

Update: I confirmed calling composition api inside computed getter is not supported in Vue3.4.

I mock a composition api for useRouter like the following:

export const useMock = inject('mock') // mock is provided earlier

And the test code:

const test = computed(() => {
  const mock = useMock();

  return mock;
})

Vue 3.3 and below is working fine with no warnings.

Vue 3.4 gives an warning at dev mode:

So we probably need the change I mentioned above. However, a lot of changes may not be needed once the router pr is merged, so I'd request you to review that and publish upstream.

[Mister-Hope]

6d78f5d