1---
2title: Watchers Created Asynchronously Must Be Manually Stopped
3impact: HIGH
4impactDescription: Async-created watchers are not bound to component lifecycle and cause memory leaks
5type: capability
6tags: [vue3, watch, watchers, async, memory-leak, lifecycle, cleanup]
7---
8 
9# Watchers Created Asynchronously Must Be Manually Stopped
10 
11**Impact: HIGH** - Watchers created inside async callbacks (setTimeout, Promise.then, async/await) are not automatically bound to the component instance. They continue running after the component unmounts, causing memory leaks and errors.
12 
13Always manually stop watchers that are created asynchronously, or restructure your code to create watchers synchronously with conditional logic.
14 
15## Task Checklist
16 
17- [ ] Create watchers synchronously in setup() or lifecycle hooks when possible
18- [ ] If async creation is unavoidable, store and call the unwatch function
19- [ ] Use `onUnmounted` to clean up async-created watchers
20- [ ] Consider using conditional logic inside a sync watcher instead
21- [ ] Watch for this pattern in setTimeout, Promise callbacks, and after await
22 
23**Incorrect:**
24```vue
25<script setup>
26import { ref, watch, watchEffect, onMounted } from 'vue'
27 
28const data = ref(null)
29 
30// BAD: Watcher created in setTimeout won't auto-stop
31onMounted(() => {
32  setTimeout(() => {
33    watchEffect(() => {
34      console.log(data.value)  // Keeps running after unmount!
35    })
36  }, 1000)
37})
38 
39// BAD: Watcher created after await won't auto-stop
40onMounted(async () => {
41  await loadInitialData()
42 
43  // This watcher is NOT bound to component lifecycle
44  watch(data, (newVal) => {
45    processData(newVal)  // Memory leak!
46  })
47})
48 
49// BAD: Watcher in Promise callback
50fetch('/api/config').then(() => {
51  watch(data, () => {
52    // Leaks memory!
53  })
54})
55</script>
56```
57 
58**Correct:**
59```vue
60<script setup>
61import { ref, watch, watchEffect, onMounted, onUnmounted } from 'vue'
62 
63const data = ref(null)
64const isDataLoaded = ref(false)
65let asyncWatcherCleanup = null
66 
67// CORRECT: Synchronous watcher with conditional logic
68watch(
69  data,
70  (newVal) => {
71    if (isDataLoaded.value && newVal) {
72      processData(newVal)
73    }
74  }
75)
76 
77onMounted(async () => {
78  await loadInitialData()
79  isDataLoaded.value = true
80})
81 
82// CORRECT: Manual cleanup for async-created watcher
83onMounted(() => {
84  setTimeout(() => {
85    const unwatch = watchEffect(() => {
86      console.log(data.value)
87    })
88 
89    // Store for cleanup
90    asyncWatcherCleanup = unwatch
91  }, 1000)
92})
93 
94onUnmounted(() => {
95  // Clean up async watcher
96  if (asyncWatcherCleanup) {
97    asyncWatcherCleanup()
98  }
99})
100</script>
101```
102 
103## Preferred Pattern: Conditional Watch Logic
104 
105```vue
106<script setup>
107import { ref, watch, onMounted } from 'vue'
108 
109const config = ref(null)
110const userData = ref(null)
111 
112// BEST: Create watcher synchronously, handle async condition inside
113watch(
114  userData,
115  (newData) => {
116    // Only process when config is loaded
117    if (config.value && newData) {
118      applyUserSettings(config.value, newData)
119    }
120  }
121)
122 
123onMounted(async () => {
124  config.value = await fetchConfig()
125  // Watcher will start processing once config is loaded
126})
127</script>
128```
129 
130## Using watchEffect with Conditional Logic
131 
132```vue
133<script setup>
134import { ref, watchEffect, onMounted } from 'vue'
135 
136const apiData = ref(null)
137const isReady = ref(false)
138 
139// GOOD: Synchronous watchEffect with condition
140watchEffect(() => {
141  if (isReady.value && apiData.value) {
142    // This pattern avoids async watcher creation
143    doSomethingWithData(apiData.value)
144  }
145})
146 
147onMounted(async () => {
148  apiData.value = await fetchData()
149  isReady.value = true
150})
151</script>
152```
153 
154## Tracking Multiple Async Watchers
155 
156```vue
157<script setup>
158import { ref, watch, onUnmounted } from 'vue'
159 
160const unwatchers = []
161 
162function createDynamicWatcher(source, callback) {
163  const unwatch = watch(source, callback)
164  unwatchers.push(unwatch)
165  return unwatch
166}
167 
168// Clean up all dynamic watchers
169onUnmounted(() => {
170  unwatchers.forEach(unwatch => unwatch())
171})
172</script>
173```
174 
175## Reference
176- [Vue.js Watchers - Stopping a Watcher](https://vuejs.org/guide/essentials/watchers.html#stopping-a-watcher)
177