Possible memory leak example in the docs could be a feature useSafeWatch

[RodrigoProjects]

Environment

Every Environment

Reproduction

I really believe a reproduction is not needed but tell me otherwise and I create one.

Describe the bug

Regarding useLazyAsyncData example: https://nuxt.com/docs/api/composables/use-lazy-async-data#example

We are making a watch call in an async context in this example, after further investigation I found some docs in Vue 3 oficial site (https://vuejs.org/guide/essentials/watchers.html#stopping-a-watcher) that say the automatic process of stopping watchers does not work in async contexts.

My workaround for this was making a new hook called useSafeWatch that looks something like this:

./useSafeWatch.ts

export default useSafeWatch() {
  const watchersToBeCleaned = []
  onBeforeUnmount(() => {
    watchersToBeCleaned.forEach(stopWatcher => stopWatcher())
  })
  return {
    watch: (...args) => {
      watchersToBeCleaned.push(watch(...args))
    }
  }
}

./usingTheHook.vue

<script setup>
const { watch } = useSafeWatch()
</script>

Another solution is making something like unctx and store the current context (vue instance in this case) in globalThis and window but this seems to be an upstream solution...

Is this something worth implementing a PR? Computeds seem to be another issue here?

Additional context

No response

Logs

No response

[RodrigoProjects]

I see this being a problem at client side, but I don't fully grasp if watchers stay bond on the current vue instance or only on the dependency array? Maybe someone can share some insights :)

[manniL]

I think the first step would be to check if it actually leads to a client-side memory leak in Nuxt 🤔

For example by:

1. Creating two pages, registering such watchers
2. Navigate between them 1000x times and check the memory consumption graph

[manniL]

Resolved via #26554