useFetch with refresh() or useAsyncData with a custom key: which gives better control over stale cached data in Nuxt 3?

In a Nuxt 3 SSR application, I need to decide how to fetch data that changes frequently on the backend. Both useFetch and useAsyncData hydrate server results into the payload to avoid double-fetching, but I am unsure which approach gives more predictable control when cached results risk becoming stale.

My understanding is that useFetch is a wrapper around useAsyncData and $fetch, so it auto-generates a key from the URL and options, while useAsyncData lets me define the key explicitly and wrap multiple calls or transformations. The concern is that a shared or poorly chosen key can cause components to reuse outdated serialized data, and that the server-side cache may serve stale responses unless refresh() is called deliberately.

The concrete constraint: several components on different routes consume the same upstream endpoint, but each route should be able to invalidate or re-fetch independently without triggering redundant requests elsewhere.

Which of the two composables is the better fit for per-route invalidation without redundant fetches? Does an explicit key in useAsyncData change hydration behavior compared to the auto-generated key in useFetch? And what is the recommended way to verify in Nuxt DevTools that hydration is happening without a second network request?