Hi @cobalt atlas. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
#Data do not reload
drowsy hatchBOT
Your issue is that the data returned by useAsyncData does not update when route.params.clubSlug changes, even though you are calling refresh() in a watcher.
What's happening:
- useAsyncData only re-executes its handler automatically when its key changes or when a watched source (via the watch option) changes.
- In your code, you are using the handler signature (no explicit key), so Nuxt generates a static key based on the file and line number. This means changing route.params.clubSlug does not change the key, so Nuxt does not know to refetch automatically.
- While you are manually calling refresh() in a watcher, this should work, but there may be issues if the watcher or refresh is not set up as expected.
Recommended solution:
Instead of using a watcher, you can leverage Nuxt's built-in reactivity by using a computed key for useAsyncData. This way, when route.params.clubSlug changes, the key changes, and Nuxt will automatically refetch the data.
<script setup lang="ts">
const route = useRoute()
const clubKey = computed(() => `club-${route.params.clubSlug}`)
const { data: home } = await useAsyncData(
clubKey,
() => queryCollection('club').path('/club/' + route.params.clubSlug).first()
)
useSeoMeta({
title: home.value?.title,
description: home.value?.description
})
</script>
This approach is recommended in the Nuxt documentation for dynamic data fetching based on route parameters. When the key changes, Nuxt will automatically refetch the data for you, and you don't need a manual watcher or refresh call. See the Nuxt docs on reactive keys for more details.
Summary:
- Use a computed key in useAsyncData that depends on route.params.clubSlug.
- Remove the manual watcher and refresh.
- This will ensure your data updates automatically when the route changes.
If you still need to watch other values or trigger manual refreshes, you can use the watch option or the refresh method as described in the docs, but for your use case, a reactive key is the most robust solution.
References: