1---
2title: watchEffect Only Tracks Dependencies Before First Await
3impact: HIGH
4impactDescription: Dependencies accessed after await are not tracked, causing watchers to miss reactive changes
5type: capability
6tags: [vue3, watchEffect, watchers, async, await, dependency-tracking]
7---
8 
9# watchEffect Only Tracks Dependencies Before First Await
10 
11**Impact: HIGH** - `watchEffect` automatically tracks reactive dependencies, but only during synchronous execution. Any reactive properties accessed after the first `await` statement will NOT be tracked, and changes to them won't trigger the watcher.
12 
13For async operations, either access all dependencies before the await, or use `watch` with explicit dependencies.
14 
15## Task Checklist
16 
17- [ ] Access all reactive dependencies BEFORE the first await in watchEffect
18- [ ] Use `watch` with explicit source when async tracking is needed
19- [ ] Store reactive values in local variables before await
20- [ ] Be aware that dependencies after await are invisible to Vue
21 
22**Incorrect:**
23```vue
24<script setup>
25import { ref, watchEffect } from 'vue'
26 
27const userId = ref(1)
28const includeDetails = ref(true)
29const userData = ref(null)
30 
31// BAD: includeDetails is accessed after await - NOT TRACKED!
32watchEffect(async () => {
33  const response = await fetch(`/api/users/${userId.value}`)
34  const data = await response.json()
35 
36  // This dependency is NOT tracked - changes won't trigger re-run
37  if (includeDetails.value) {
38    userData.value = { ...data, details: await fetchDetails(data.id) }
39  } else {
40    userData.value = data
41  }
42})
43 
44// BAD: Multiple dependencies after await
45watchEffect(async () => {
46  await someAsyncSetup()
47 
48  // None of these are tracked!
49  console.log(optionA.value)  // Not tracked
50  console.log(optionB.value)  // Not tracked
51  doSomething(optionC.value)  // Not tracked
52})
53</script>
54```
55 
56**Correct:**
57```vue
58<script setup>
59import { ref, watchEffect, watch } from 'vue'
60 
61const userId = ref(1)
62const includeDetails = ref(true)
63const userData = ref(null)
64 
65// CORRECT: Access all dependencies before await
66watchEffect(async () => {
67  // Capture reactive values synchronously
68  const id = userId.value
69  const withDetails = includeDetails.value
70 
71  // Now these are tracked
72  const response = await fetch(`/api/users/${id}`)
73  const data = await response.json()
74 
75  if (withDetails) {
76    userData.value = { ...data, details: await fetchDetails(data.id) }
77  } else {
78    userData.value = data
79  }
80})
81 
82// ALTERNATIVE: Use watch with explicit dependencies
83watch(
84  [userId, includeDetails],
85  async ([id, withDetails]) => {
86    const response = await fetch(`/api/users/${id}`)
87    const data = await response.json()
88 
89    if (withDetails) {
90      userData.value = { ...data, details: await fetchDetails(data.id) }
91    } else {
92      userData.value = data
93    }
94  },
95  { immediate: true }
96)
97</script>
98```
99 
100## Pattern: Extract Dependencies First
101 
102```vue
103<script setup>
104import { ref, watchEffect } from 'vue'
105 
106const filters = ref({ status: 'active', sortBy: 'name' })
107const page = ref(1)
108const results = ref([])
109 
110// CORRECT: Extract all needed values synchronously
111watchEffect(async () => {
112  // All dependencies accessed before await - all tracked!
113  const { status, sortBy } = filters.value
114  const currentPage = page.value
115 
116  // Now safe to do async work
117  const response = await fetch(
118    `/api/items?status=${status}&sort=${sortBy}&page=${currentPage}`
119  )
120  results.value = await response.json()
121})
122</script>
123```
124 
125## When to Use watch Instead
126 
127```vue
128<script setup>
129import { ref, watch } from 'vue'
130 
131const source = ref('initial')
132const option = ref('default')
133const result = ref(null)
134 
135// BEST for complex async: Use watch with explicit sources
136// All dependencies are explicitly declared and always tracked
137watch(
138  [source, option],
139  async ([sourceVal, optionVal]) => {
140    const data = await processAsync(sourceVal)
141    result.value = applyOption(data, optionVal)
142  },
143  { immediate: true }
144)
145</script>
146```
147 
148## Debugging Untracked Dependencies
149 
150```vue
151<script setup>
152import { ref, watchEffect } from 'vue'
153 
154const a = ref(1)
155const b = ref(2)
156 
157watchEffect(async () => {
158  console.log('Tracked dependency a:', a.value)  // Tracked
159 
160  await someAsyncOperation()
161 
162  console.log('Untracked dependency b:', b.value)  // NOT tracked!
163  // Changing b.value won't re-run this watchEffect
164})
165 
166// Test: Change a.value -> watchEffect re-runs
167// Test: Change b.value -> watchEffect does NOT re-run
168</script>
169```
170 
171## Reference
172- [Vue.js Watchers - watchEffect](https://vuejs.org/guide/essentials/watchers.html#watcheffect)
173- [Vue.js API - watchEffect](https://vuejs.org/api/reactivity-core.html#watcheffect)
174