fix: active class on sidebar links

src/vitepress/components/VPSidebarLink.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import { useData } from 'vitepress'
-import { ref, inject, onMounted } from 'vue'
+import { ref, inject, onMounted, watchPostEffect } from 'vue'
 import { MenuItemWithLink } from '../../core'
 import { isActive } from '../support/utils'
 
@@ -13,17 +13,16 @@ const closeSideBar = inject('close-sidebar') as () => void
 
 // https://github.com/vuejs/theme/issues/97#issuecomment-1666562964
 const active = ref(false)
-const checkActive = () => {
- return isActive(page.value.relativePath, props.item.link)
+const updateActive = () => {
+ active.value = isActive(page.value.relativePath, props.item.link)
 }
-onMounted(() => {
- active.value = checkActive()
-})
+onMounted(updateActive)
+watchPostEffect(updateActive)
 </script>
 
 <template>
  <a
- :class="{ link: true, active: active || checkActive() }"
+ :class="{ link: true, active }"
  :href="item.link"
  @click="closeSideBar"
  >