`useFetch` does not refresh when a params object is used

Environment

Linux

Reproduction

Go to: https://stackblitz.com/edit/github-mt2nv8?file=app.vue

Try to increase the page by pressing the respective button. The same request is performed with each button press.

As described in the sandbox, using the _start param as part of the url works properly.

Describe the bug

The refresh function of the useFetch composable does not properly refresh requests that depend on params object instead of params in the url itself.

Additional context

No response

Logs

No response

[danielroe]

Yes. You should instead use it in the URL directly as I have done above, as the params are ‘frozen’ in time when the setup function runs. (This is not unique to Nuxt, but is a caveat of Vue reactivity.)

[shtse8]

Yes. You should instead use it in the URL directly as I have done above, as the params are ‘frozen’ in time when the setup function runs. (This is not unique to Nuxt, but is a caveat of Vue reactivity.)

when using it in url, the response type cannot be solved in typescript. type will become unknown. I suggest we can have something like

const next = ref('')
const { data } = await useFetch('/api/list', {
    params: {
      next: () => next.value,
    },
  })