Custom useFetch hook in component and child component with condition on pending causes infinite fetching loop

[feelixe]

Environment

• Operating System: Windows_NT
• Node Version: v16.13.0
• Nuxt Version: 3.0.0
• Nitro Version: 1.0.0
• Package Manager: [email protected]
• Builder: vite
• User Config: modules, css, build, vite, devServer
• Runtime Modules: @nuxtjs/[email protected], @vueuse/[email protected]
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-ioxz7i

1. Open your browser's console. (Will not be visible in the server-side console)
2. Click on "refresh" to refresh the useFetch hook.
3. Look in the console. FetchComponent is rendered over and over again.

Describe the bug

When defining a custom hook in composable like:

export function useSomething() {
  return useFetch(`/api/something`, { key: 'something' });
}

If you then use that hook in a component and in one of its child components while conditioning the rendering of the child component on !pending of the hook. Then the request will execute over and over again.

This can be resolved by conditionally rendering on data !== null instead. But I would expect that conditally rendering on data !== null and !error && !pending should have the same result.

Additional context

No response

Logs

No response