How to make useData() reactive with page change?

[Zezombye]

At the end of each page, I want to link all other pages (except the current one).

I made an AllArticles component that I put in my layout:

<template>
    <Layout>
        <template #doc-bottom>
            <AllArticles/>
        </template>
    </Layout>
</template>

<script setup>
import DefaultTheme from 'vitepress/theme'
import AllArticles from './AllArticles.vue';
const Layout = DefaultTheme.Layout;
</script>

<template>
    <ArticleGroup title="Other articles" :articles="otherArticles.filter(article => article.url !== currentPagePath)"/>
</template>


<script setup>
import { useData } from 'vitepress';

const data = useData();

const page = data.page.value;
let currentPagePath = page.relativePath.replace(".md", "");

let otherArticles = [
    {url: "page1", title: "Page 1"},
    {url: "page2", title: "Page 2"},
    {url: "page3", title: "Page 3"},
];

This works fine and when I am on page 1, it only displays pages 2+3. But clicking on page 2 does not reload the component and pages 2+3 are still displayed at the end of page 2 (instead of pages 1+3).

Is there a way to make the component reload upon page change (shouldn't it be reloaded by default if it is in the doc-bottom slot?), or to make the component aware of when the path changes?

[brc-dd]

Use computed (https://vuejs.org/guide/essentials/computed.html)

Something like this might work:

const { page } = useData()
const currentPagePath = computed(() => page.value.relativePath.replace('.md', ''))

[Zezombye]

Works, thanks!