I have a Nuxt 3 app using useAsyncData with a pre-rendering approach. The API call is made as follows:

const { data: accommodation, refresh } = await useAsyncData(`accommodations/${locale.value}/${route?.params?.id}`, async () => {
  const payload = {
    id: route.params.id,
    check_in: searchStore.getCheckIn,
    check_out: searchStore.getCheckOut,
    adults: searchStore.searchedGuests.adults,
    children: searchStore.searchedGuests.children,
  };

  const accommodations = await getLodging(payload);
  return accommodations.data;
});

The pages follow a structure like: