1---
2title: Copy Arrays Before reverse() or sort() in Computed Properties
3impact: MEDIUM
4impactDescription: reverse() and sort() mutate the original array, causing unintended side effects in computed getters
5type: gotcha
6tags: [vue3, v-for, computed, array, mutation, list-rendering]
7---
8 
9# Copy Arrays Before reverse() or sort() in Computed Properties
10 
11**Impact: MEDIUM** - The `reverse()` and `sort()` methods mutate the original array in-place. When used directly in a computed property getter, this causes the source array to be modified, leading to infinite reactivity loops or incorrect data state.
12 
13Computed properties should be pure - they calculate a value without side effects. Mutating the source data inside a computed getter violates this principle and causes unpredictable behavior.
14 
15## Task Checklist
16 
17- [ ] Always create a copy of the array before calling `reverse()` or `sort()` in computed properties
18- [ ] Use spread operator `[...array]` or `Array.from(array)` or `array.slice()` to copy
19- [ ] This applies to any in-place mutation method used in computed getters
20- [ ] Consider using `toSorted()` and `toReversed()` (ES2023) which return new arrays
21 
22**Incorrect:**
23```javascript
24const numbers = ref([1, 2, 3, 4, 5])
25 
26// WRONG: Mutates the original array
27const reversedNumbers = computed(() => {
28  return numbers.value.reverse()  // Modifies numbers.value!
29})
30 
31// WRONG: Same issue with sort
32const sortedItems = computed(() => {
33  return items.value.sort((a, b) => a.name.localeCompare(b.name))
34})
35```
36 
37**Correct:**
38```javascript
39const numbers = ref([1, 2, 3, 4, 5])
40 
41// CORRECT: Create a copy first with spread operator
42const reversedNumbers = computed(() => {
43  return [...numbers.value].reverse()
44})
45 
46// CORRECT: Create a copy before sorting
47const sortedItems = computed(() => {
48  return [...items.value].sort((a, b) => a.name.localeCompare(b.name))
49})
50 
51// CORRECT: Using slice() to copy
52const reversedNumbers = computed(() => {
53  return numbers.value.slice().reverse()
54})
55 
56// CORRECT: ES2023 non-mutating methods (if supported)
57const reversedNumbers = computed(() => {
58  return numbers.value.toReversed()
59})
60 
61const sortedItems = computed(() => {
62  return items.value.toSorted((a, b) => a.price - b.price)
63})
64```
65 
66## Also Applies to Methods Used in Templates
67 
68When using methods to filter/sort in nested v-for loops, the same rule applies:
69 
70```javascript
71// CORRECT: Method that doesn't mutate
72function getSortedChildren(parent) {
73  return [...parent.children].sort((a, b) => a.order - b.order)
74}
75```
76 
77```html
78<ul v-for="parent in parents" :key="parent.id">
79  <li v-for="child in getSortedChildren(parent)" :key="child.id">
80    {{ child.name }}
81  </li>
82</ul>
83```
84 
85## Reference
86- [Vue.js List Rendering - Displaying Filtered/Sorted Results](https://vuejs.org/guide/essentials/list.html#displaying-filtered-sorted-results)
87