1---
2title: Avoid Mutating Methods on Arrays in Computed Properties
3impact: HIGH
4impactDescription: Array mutating methods in computed modify source data causing unexpected behavior
5type: capability
6tags: [vue3, computed, arrays, mutation, sort, reverse]
7---
8 
9# Avoid Mutating Methods on Arrays in Computed Properties
10 
11**Impact: HIGH** - JavaScript array methods like `reverse()`, `sort()`, `splice()`, `push()`, `pop()`, `shift()`, and `unshift()` mutate the original array. Using them directly on reactive arrays inside computed properties will modify your source data, causing unexpected side effects and bugs.
12 
13## Task Checklist
14 
15- [ ] Always create a copy of arrays before using mutating methods
16- [ ] Use spread operator `[...array]` or `slice()` to copy arrays
17- [ ] Prefer non-mutating alternatives when available
18- [ ] Be aware which array methods mutate vs return new arrays
19 
20**Incorrect:**
21```vue
22<script setup>
23import { ref, computed } from 'vue'
24 
25const items = ref([3, 1, 4, 1, 5, 9, 2, 6])
26const users = ref([
27  { name: 'Alice', age: 30 },
28  { name: 'Bob', age: 25 }
29])
30 
31// BAD: sort() mutates the original array!
32const sortedItems = computed(() => {
33  return items.value.sort((a, b) => a - b)
34})
35 
36// BAD: reverse() mutates the original array!
37const reversedItems = computed(() => {
38  return items.value.reverse()
39})
40 
41// BAD: Both arrays now point to the same mutated data
42// items.value and sortedItems.value are the SAME array
43// items.value and reversedItems.value are the SAME array
44 
45// BAD: Chained mutations
46const sortedUsers = computed(() => {
47  return users.value.sort((a, b) => a.age - b.age)
48})
49</script>
50 
51<template>
52  <!-- Original array is corrupted! -->
53  <div>Original: {{ items }}</div>
54  <div>Sorted: {{ sortedItems }}</div>
55</template>
56```
57 
58**Correct:**
59```vue
60<script setup>
61import { ref, computed } from 'vue'
62 
63const items = ref([3, 1, 4, 1, 5, 9, 2, 6])
64const users = ref([
65  { name: 'Alice', age: 30 },
66  { name: 'Bob', age: 25 }
67])
68 
69// GOOD: Spread operator creates a copy first
70const sortedItems = computed(() => {
71  return [...items.value].sort((a, b) => a - b)
72})
73 
74// GOOD: slice() also creates a copy
75const reversedItems = computed(() => {
76  return items.value.slice().reverse()
77})
78 
79// GOOD: Copy before sorting objects
80const sortedUsers = computed(() => {
81  return [...users.value].sort((a, b) => a.age - b.age)
82})
83 
84// GOOD: Use toSorted() (ES2023) - non-mutating
85const sortedItemsModern = computed(() => {
86  return items.value.toSorted((a, b) => a - b)
87})
88 
89// GOOD: Use toReversed() (ES2023) - non-mutating
90const reversedItemsModern = computed(() => {
91  return items.value.toReversed()
92})
93</script>
94 
95<template>
96  <!-- Original array stays intact -->
97  <div>Original: {{ items }}</div>
98  <div>Sorted: {{ sortedItems }}</div>
99  <div>Reversed: {{ reversedItems }}</div>
100</template>
101```
102 
103## Mutating vs Non-Mutating Array Methods
104 
105| Mutating (Avoid in Computed) | Non-Mutating (Safe) |
106|------------------------------|---------------------|
107| `sort()` | `toSorted()` (ES2023) |
108| `reverse()` | `toReversed()` (ES2023) |
109| `splice()` | `toSpliced()` (ES2023) |
110| `push()` | `concat()` |
111| `pop()` | `slice(0, -1)` |
112| `shift()` | `slice(1)` |
113| `unshift()` | `[item, ...array]` |
114| `fill()` | `map()` with new values |
115 
116## ES2023 Non-Mutating Alternatives
117 
118Modern JavaScript (ES2023) provides non-mutating versions of common array methods:
119 
120```javascript
121// These return NEW arrays, safe for computed properties
122const sorted = array.toSorted((a, b) => a - b)
123const reversed = array.toReversed()
124const spliced = array.toSpliced(1, 2, 'new')
125const withReplaced = array.with(0, 'newFirst')
126```
127 
128## Deep Copy for Nested Arrays
129 
130For arrays of objects where you might mutate nested properties:
131 
132```javascript
133const items = ref([{ name: 'A', values: [1, 2, 3] }])
134 
135// Shallow copy - nested arrays still shared
136const copied = computed(() => [...items.value])
137 
138// Deep copy if you need to mutate nested structures
139const deepCopied = computed(() => {
140  return JSON.parse(JSON.stringify(items.value))
141  // Or use structuredClone():
142  // return structuredClone(items.value)
143})
144```
145 
146## Reference
147- [Vue.js Computed Properties - Avoid Mutating Computed Value](https://vuejs.org/guide/essentials/computed.html#avoid-mutating-computed-value)
148- [MDN Array Methods](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
149