1---
2title: Composition API Uses Mutable Reactivity, Not Functional Programming
3impact: MEDIUM
4impactDescription: Misunderstanding the paradigm leads to incorrect state management patterns
5type: gotcha
6tags: [vue3, composition-api, reactivity, functional-programming, paradigm]
7---
8 
9# Composition API Uses Mutable Reactivity, Not Functional Programming
10 
11**Impact: MEDIUM** - Despite being function-based, the Composition API follows Vue's mutable, fine-grained reactivity paradigm—NOT functional programming principles. Treating it like a functional paradigm leads to incorrect patterns like unnecessary cloning, immutable-style updates, or avoiding mutation when mutation is the intended pattern.
12 
13Vue's Composition API leverages imported functions to organize code, but the underlying model is based on mutable reactive state that Vue tracks and responds to. This is fundamentally different from functional programming with immutability (like Redux reducers).
14 
15## Task Checklist
16 
17- [ ] Mutate reactive state directly - don't create new objects for every update
18- [ ] Don't apply immutability patterns unnecessarily (spreading, Object.assign for updates)
19- [ ] Understand that `ref()` and `reactive()` enable mutable state tracking
20- [ ] Use Vue's reactivity as intended: direct mutation with automatic tracking
21 
22**Incorrect:**
23```javascript
24import { ref } from 'vue'
25 
26const todos = ref([])
27 
28// WRONG: Treating Vue like Redux/functional - unnecessary immutability
29function addTodo(todo) {
30  // Creating a new array every time is wasteful in Vue
31  todos.value = [...todos.value, todo]
32}
33 
34function updateTodo(id, updates) {
35  // Unnecessary spread - Vue tracks mutations directly
36  todos.value = todos.value.map(t =>
37    t.id === id ? { ...t, ...updates } : t
38  )
39}
40 
41const user = ref({ name: 'John', age: 30 })
42 
43// WRONG: Creating new object for simple update
44function updateName(newName) {
45  user.value = { ...user.value, name: newName }
46}
47```
48 
49**Correct:**
50```javascript
51import { ref, reactive } from 'vue'
52 
53const todos = ref([])
54 
55// CORRECT: Mutate directly - Vue tracks the change
56function addTodo(todo) {
57  todos.value.push(todo)  // Direct mutation is the Vue way
58}
59 
60function updateTodo(id, updates) {
61  const todo = todos.value.find(t => t.id === id)
62  if (todo) {
63    Object.assign(todo, updates)  // Direct mutation
64  }
65}
66 
67const user = ref({ name: 'John', age: 30 })
68 
69// CORRECT: Mutate the property directly
70function updateName(newName) {
71  user.value.name = newName  // Vue tracks this!
72}
73 
74// Or with reactive():
75const state = reactive({ name: 'John', age: 30 })
76 
77function updateNameReactive(newName) {
78  state.name = newName  // Direct mutation, reactivity preserved
79}
80```
81 
82## When Immutability Patterns Make Sense
83 
84```javascript
85// Immutability IS appropriate when:
86 
87// 1. Replacing the entire state (e.g., from API response)
88const users = ref([])
89async function fetchUsers() {
90  users.value = await api.getUsers()  // Complete replacement is fine
91}
92 
93// 2. When you need a snapshot for comparison
94const previousState = { ...currentState }  // For undo/redo
95 
96// 3. When passing data to external libraries expecting immutable data
97const chartData = computed(() => [...rawData.value])  // Copy for chart lib
98```
99 
100## The Vue Mental Model
101 
102```javascript
103// Vue's reactivity is like a spreadsheet:
104// - Cell A1 contains a value (ref)
105// - Cell B1 has a formula referencing A1 (computed)
106// - Change A1, and B1 automatically updates
107 
108const a1 = ref(10)
109const b1 = computed(() => a1.value * 2)
110 
111// You CHANGE A1 (mutate), you don't create a new A1
112a1.value = 20  // b1 automatically becomes 40
113 
114// This is fundamentally different from:
115// state = reducer(state, action)  // Functional/Redux pattern
116```
117 
118## Reference
119- [Composition API FAQ](https://vuejs.org/guide/extras/composition-api-faq.html)
120- [Reactivity Fundamentals](https://vuejs.org/guide/essentials/reactivity-fundamentals.html)
121