1---
2title: Ensure All Dependencies Are Accessed in Computed Properties
3impact: HIGH
4impactDescription: Conditional logic can prevent dependency tracking causing stale computed values
5type: capability
6tags: [vue3, computed, reactivity, dependency-tracking, gotcha]
7---
8 
9# Ensure All Dependencies Are Accessed in Computed Properties
10 
11**Impact: HIGH** - Vue tracks computed property dependencies by monitoring which reactive properties are accessed during execution. If conditional logic prevents a property from being accessed on the first run, Vue won't track it as a dependency, causing the computed property to not update when that property changes.
12 
13This is a subtle but common source of bugs, especially with short-circuit evaluation (`&&`, `||`) and early returns.
14 
15## Task Checklist
16 
17- [ ] Access all reactive dependencies before any conditional logic
18- [ ] Be cautious with short-circuit operators (`&&`, `||`) that may skip property access
19- [ ] Store all dependencies in variables at the start of the computed getter
20- [ ] Test computed properties with different initial states
21 
22**Incorrect:**
23```vue
24<script setup>
25import { ref, computed } from 'vue'
26 
27const isEnabled = ref(false)
28const data = ref('important data')
29 
30// BAD: If isEnabled is false initially, data.value is never accessed
31// Vue won't track 'data' as a dependency!
32const result = computed(() => {
33  if (!isEnabled.value) {
34    return 'disabled'
35  }
36  return data.value  // This dependency may not be tracked
37})
38 
39// BAD: Short-circuit prevents second access
40const password = ref('')
41const confirmPassword = ref('')
42 
43const isValid = computed(() => {
44  // If password is empty, confirmPassword is never accessed
45  return password.value && password.value === confirmPassword.value
46})
47 
48// BAD: Early return prevents dependency access
49const user = ref(null)
50const permissions = ref(['read', 'write'])
51 
52const canEdit = computed(() => {
53  if (!user.value) {
54    return false  // permissions.value never accessed when user is null
55  }
56  return permissions.value.includes('write')
57})
58</script>
59```
60 
61**Correct:**
62```vue
63<script setup>
64import { ref, computed } from 'vue'
65 
66const isEnabled = ref(false)
67const data = ref('important data')
68 
69// GOOD: Access all dependencies first
70const result = computed(() => {
71  const enabled = isEnabled.value
72  const currentData = data.value  // Always accessed
73 
74  if (!enabled) {
75    return 'disabled'
76  }
77  return currentData
78})
79 
80// GOOD: Access both values before comparison
81const password = ref('')
82const confirmPassword = ref('')
83 
84const isValid = computed(() => {
85  const pwd = password.value
86  const confirm = confirmPassword.value  // Always accessed
87 
88  return pwd && pwd === confirm
89})
90 
91// GOOD: Access all reactive sources upfront
92const user = ref(null)
93const permissions = ref(['read', 'write'])
94 
95const canEdit = computed(() => {
96  const currentUser = user.value
97  const currentPermissions = permissions.value  // Always accessed
98 
99  if (!currentUser) {
100    return false
101  }
102  return currentPermissions.includes('write')
103})
104</script>
105```
106 
107## The Dependency Tracking Mechanism
108 
109Vue's reactivity system works by tracking which reactive properties are accessed when a computed property runs:
110 
111```javascript
112// How Vue tracks dependencies (simplified):
113// 1. Start tracking
114// 2. Run the getter function
115// 3. Record every .value or reactive property access
116// 4. Stop tracking
117 
118const computed = computed(() => {
119  // Vue starts tracking here
120  if (conditionA.value) {      // conditionA is tracked
121    return valueB.value        // valueB is ONLY tracked if conditionA is true
122  }
123  return 'default'             // If conditionA is false, valueB is NOT tracked!
124})
125```
126 
127## Pattern: Destructure All Dependencies First
128 
129```javascript
130// GOOD PATTERN: Destructure/access everything at the top
131const result = computed(() => {
132  // Access all potential dependencies
133  const { user, settings, items } = toRefs(store)
134  const userVal = user.value
135  const settingsVal = settings.value
136  const itemsVal = items.value
137 
138  // Now use conditional logic safely
139  if (!userVal) return []
140  if (!settingsVal.enabled) return []
141  return itemsVal.filter(i => i.active)
142})
143```
144 
145## Reference
146- [Vue.js Reactivity in Depth](https://vuejs.org/guide/extras/reactivity-in-depth.html)
147- [GitHub Discussion: Dependency collection gotcha with conditionals](https://github.com/vuejs/Discussion/issues/15)
148