1---
2title: Computed Property Getters Must Be Side-Effect Free
3impact: HIGH
4impactDescription: Side effects in computed getters break reactivity and cause unpredictable behavior
5type: efficiency
6tags: [vue3, computed, reactivity, side-effects, best-practices]
7---
8 
9# Computed Property Getters Must Be Side-Effect Free
10 
11**Impact: HIGH** - Computed getter functions should only perform pure computation. Side effects in computed getters break Vue's reactivity model and cause bugs that are difficult to trace.
12 
13Computed properties are designed to declaratively describe how to derive a value from other reactive state. They are not meant to perform actions or modify state.
14 
15## Task Checklist
16 
17- [ ] Never mutate other reactive state inside a computed getter
18- [ ] Never make async requests or API calls inside a computed getter
19- [ ] Never perform DOM mutations inside a computed getter
20- [ ] Use watchers for reacting to state changes with side effects
21- [ ] Use event handlers for user-triggered actions
22 
23**Incorrect:**
24```vue
25<script setup>
26import { ref, computed } from 'vue'
27 
28const items = ref([])
29const count = ref(0)
30const lastFetch = ref(null)
31 
32// BAD: Mutates other state
33const doubledCount = computed(() => {
34  count.value++  // Side effect - modifying state!
35  return count.value * 2
36})
37 
38// BAD: Makes async request
39const userData = computed(async () => {
40  const response = await fetch('/api/user')  // Side effect - API call!
41  return response.json()
42})
43 
44// BAD: Modifies DOM
45const highlightedItems = computed(() => {
46  document.title = `${items.value.length} items`  // Side effect - DOM mutation!
47  return items.value.filter(i => i.highlighted)
48})
49 
50// BAD: Writes to external state
51const processedData = computed(() => {
52  lastFetch.value = new Date()  // Side effect - modifying state!
53  return items.value.map(i => i.name)
54})
55</script>
56```
57 
58**Correct:**
59```vue
60<script setup>
61import { ref, computed, watch, onMounted } from 'vue'
62 
63const items = ref([])
64const count = ref(0)
65const userData = ref(null)
66 
67// GOOD: Pure computation only
68const doubledCount = computed(() => {
69  return count.value * 2
70})
71 
72// GOOD: Use lifecycle hook for initial fetch
73onMounted(async () => {
74  const response = await fetch('/api/user')
75  userData.value = await response.json()
76})
77 
78// GOOD: Pure filtering
79const highlightedItems = computed(() => {
80  return items.value.filter(i => i.highlighted)
81})
82 
83// GOOD: Use watcher for side effects
84watch(items, (newItems) => {
85  document.title = `${newItems.length} items`
86}, { immediate: true })
87 
88// Increment count through event handler, not computed
89function increment() {
90  count.value++
91}
92</script>
93```
94 
95## What Counts as a Side Effect
96 
97| Side Effect Type | Example | Alternative |
98|-----------------|---------|-------------|
99| State mutation | `otherRef.value = x` | Use watcher |
100| API calls | `fetch()`, `axios()` | Use watcher or lifecycle hook |
101| DOM manipulation | `document.title = x` | Use watcher |
102| Console logging | `console.log()` | Remove or use watcher |
103| Storage access | `localStorage.setItem()` | Use watcher |
104| Timer setup | `setTimeout()` | Use lifecycle hook |
105 
106## Reference
107- [Vue.js Computed Properties - Getters Should Be Side-Effect Free](https://vuejs.org/guide/essentials/computed.html#getters-should-be-side-effect-free)
108