我使用useFetch来获取组合API中的数据，然后在组件中调用onMounted钩子中的函数，下面是代码。

useShows.ts（可组合）

export function useShows(){

    var shows = useState<Show[]>('shows')

    const fetchShows = async() => {
        const {data, pending} = await useFetch<Show[]>('http://localhost:3000/shows')
        shows.value = data.value
    }

    return {shows, fetchShows}
}

显示.vue

<script setup lang="ts">

    var { shows, fetchShows } = useShows()

    onMounted(() => {
        console.log("On mounted called")
        fetchShows()
    })
</script>

<template>
    <div>{{shows}}</div>
</template>

当我从主页导航到/shows时，它工作正常，但当我直接打开链接localhost/shows时，它不工作，只给我空值。