I am experiencing an issue with my Vue3 template file that is fetching data from Strapi. While it works fine on my local machine, the content only loads correctly on the first page load when I run it online. Subsequent page changes do not update the content (even though it's set up as a dynamic page). However, refreshing the page results in the correct content being displayed and the URL also updates accordingly.
<template>
<div v-if="!pending">
{{ route.params.slug }}
<div v-if="project.data[0]">
<Head>
<Title>{{ project.data[0].attributes.title }} / Tuomoas Markunpoika</Title>
</Head>
<div id="hero">
<img :src="`${config.public.strapiURL}${project.data[0].attributes.preview.image.data.attributes.url}`" />
</div>
<ContentBlocks :blocks="project.data[0].attributes.content" />
<h2 v-if="project.data[0].attributes.items.data.length" class="main-heading">Collection</h2>
<ItemGrid v-if="project.data[0].attributes.items.data.length" :overview="`projects`" :selection="`${route.params.slug}`" />
</div>
</div>
</template>
<script setup>
const route = useRoute()
const config = useRuntimeConfig()
const { data: project, pending } = await useAsyncData("project", () =>
$fetch(`${config.public.strapiURL}/api/projects/?filters[slug][$eq]=${route.params.slug}&populate[meta][populate]=*&populate[preview][populate]=*&populate[content][populate]=*&populate[items]=*`)
)
if (!project.value || Object.keys(project.value.data).length === 0) {
throw createError({ statusCode: 404, statusMessage: "Page Not Found" })
}
</script>