Do watcher's created in composables need to have their unwatch function invoked?

[ehainer]

Just a general curiosity since the docs don't cover this use case specifically.

According to https://vuejs.org/guide/essentials/watchers.html#stopping-a-watcher, a watcher created syncronously inside setup are bound to the component instance and will be automatically stopped when the component is unmounted, but is the same true if the watcher is created within a composable? For example:

component.vue

<script setup lang="ts">
const comp = useComposable()
</script>

composable.ts

export const useComposable = () => {
  const prop = ref('some reactive data')

  // Will this be stopped automatically when `component` is unmounted?
  // Or would it be wise to implement an onUnmounted callback here to stop the watcher as well?
  watch(prop, () => {
    // ...
  })
}

Kind of assuming that as long as the watcher is not created asyncronously the same rules apply and yes the watcher will be stopped automatically. Just in the pursuit of a definitive clear answer.

Thank you kindly

[melenaos]

From running into this problem i suppose that it won't automatically unwatch the watchers that are created within a composable.

That means that every time useComposable is called, a new watch event is created, unless you unwatch it 'onUnmounted`.

I wish there was a way to create a destructor in the composable, in a way to be called automatically from setup mechanism without the need to explicit call it onUnmounted.

Something like the automatic unwatch of watch.

Can we replicate the watch mechanism for auto unwatch when the component is unmounted?

[posva]

If you run into that issue, you likely invoked the watcher outside of the context of the component (async or within a function). If you didn't, you should open an issue (with a repro ofc)

[posva]

Kind of assuming that as long as the watcher is not created asyncronously the same rules apply and yes the watcher will be stopped automatically. Just in the pursuit of a definitive clear answer.

Yes, that's correct. It's as if the watch() was invoked where you called your composable, so it gets destroyed automatically, no need to add an onUnmounted()