useLazyFetch with useRoute query not work

Environment

useLazyFetch

Reproduction

useLazyFetch

Describe the bug

there is a Pagination component

<template>
  <div class="tw-flex tw-flex-wrap tw-justify-between">
    <div class="tw-flex tw-items-center">
      <div class="tw-flex">
        <nuxt-link v-for="(page, index) in pageCount" :key="index"
          :class="[activePageNumber == page ? 'tw-bg-default-600 tw-text-white': 'tw-bg-transparent']"
          :to="`${link}?page=${page}`"
          class="tw-py-2 tw-px-3 tw-mr-2 tw-rounded tw-cursor-pointer tw-inline-block tw-h-8 tw-text-center"
        >{{ page }}
        </nuxt-link>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useRoute } from '#app';
import { computed } from '#imports';

const props = defineProps({
  params: {
    type: Object,
    required: true
  }
});

const route = useRoute();

const link = computed(() => {
  return route.path;
});

const pageCount = computed(() => {
  return Math.ceil(props.params.total / props.params.take);
});

const activePageNumber = computed(() => {
  return route.query.page ?? 1;
});

</script>

My page

const route = useRoute();

const params = reactive({
  skip: 0,
  take: 4
});

const meta = reactive({
  skip: 0,
  take: 4,
  total: 0
});

if (route.query?.page) params.skip = route.query?.page;

const {
  pending,
  data:excursions
} =
  repositoryService.repository.getExcursionsByPaginate(params);

After clicking on pagination links, substitution in useLazyFetch route.query.page does not work

Additional context

No response

Logs

No response

[lucassimines]

useLazyFetch seems not regenating a key for each request, all my useLazyFetch calls returns the same response of the first call.

[rvmourik]

I have something related, when I use the route.name in a computed variable OR use the route(.name) in a watch function it doesn’t get triggered after navigating.

When I output the $route.name in the template tag, this does get updated after navigating.