diff --git a/app.vue b/app.vue
index 08528fd..f687c43 100644
--- a/app.vue
+++ b/app.vue
@@ -4,7 +4,6 @@ import { en, es, fr } from '@nuxt/ui/locale'
 const uiLocales: Record<string, typeof en> = { en, fr, es }
 
 const { t, locale } = useI18n()
-const route = useRoute()
 const uiLocale = computed(() => uiLocales[locale.value] || en)
 
 useSeoMeta({
@@ -34,7 +33,7 @@ useSchemaOrg([
 <template>
   <UApp :locale="uiLocale">
     <NuxtLayout>
-      <NuxtPage :page-key="route.path" />
+      <NuxtPage :page-key="locale" />
     </NuxtLayout>
   </UApp>
 </template>
diff --git a/pages/[...slug].vue b/pages/[...slug].vue
index a54cd46..3721709 100644
--- a/pages/[...slug].vue
+++ b/pages/[...slug].vue
@@ -10,8 +10,8 @@ const path = computed(() => {
   return `/${locale.value}/${slug.value.join('/')}`
 })
 
-const { data: page } = await useAsyncData(
-  `slug-${locale.value}-${slug.value.join('/')}`,
+const { data: page, status: pageStatus } = await useAsyncData(
+  () => `slug-${locale.value}-${slug.value.join('/')}`,
   () => queryCollection(collectionName.value).path(path.value).first(),
 )
 
@@ -19,10 +19,15 @@ if (!page.value) {
   throw createError({ statusCode: 404, statusMessage: 'Page not found' })
 }
 
+watch(pageStatus, (status) => {
+  if (status === 'success' && !page.value) {
+    showError({ statusCode: 404, statusMessage: 'Page not found' })
+  }
+})
+
 const { data: navigation } = await useAsyncData(
-  `navigation-${locale.value}`,
+  () => `navigation-${locale.value}`,
   () => queryCollectionNavigation(collectionName.value),
-  { watch: [locale] },
 )
 
 const docsSections = computed(() => extractDocsSections(navigation.value ?? []))
@@ -34,7 +39,7 @@ const sectionSlug = computed<string | undefined>(() => {
 })
 
 const { data: sectionIndex } = await useAsyncData(
-  `breadcrumb-section-${locale.value}-${sectionSlug.value ?? ''}`,
+  () => `breadcrumb-section-${locale.value}-${sectionSlug.value ?? ''}`,
   () => {
     const section = sectionSlug.value
     return section
@@ -44,7 +49,7 @@ const { data: sectionIndex } = await useAsyncData(
 )
 
 const { data: rawSurround } = await useAsyncData(
-  `surround-${locale.value}-${slug.value.join('/')}`,
+  () => `surround-${locale.value}-${slug.value.join('/')}`,
   () => isDocsPage.value
     ? queryCollectionItemSurroundings(collectionName.value, path.value, { before: 2, after: 2 })
     : Promise.resolve(null),