useLazyFetch with useRoute query not work

[aslero]

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]

I'm experiencing the same issue after upgrading from rc.4 -> rc.6

[danielroe]

Would you provide a reproduction? 🙏

[aslero]

Would you provide a reproduction? 🙏

Is it right to paginate through watch?

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

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

const excursions = computed(() => result.value?.data);
const meta = computed(() => result.value?.meta);

watch(() => route.query, () => {
  params.skip = route.query?.page;
  refresh();
});

If you take watch, then when I go to the tour card or to another page, it works out exactly and I get one extra request

[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.

[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.

Some additional info, when I do the following:

In RC.6

console.log(useRoute());

Output:

Proxy with computed values

In edge

console.log(useRoute());

Output:

Regular json object with values

[lucassimines]

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

[danielroe]

Let's track in https://github.com/nuxt/framework/issues/5993.