Vue Tip: Avoid Side Effects in Computed Properties

It is considered bad practice to introduce side effects inside computed properties and functions because it makes the code unpredictable and hard to understand.

What is a side effect? In the context of computed properties, a side effect is a modification of the state's global state or the internal component state.

Let's take a look at an example with side effects:

Code with side effectsComponent.vue
<script setup lang="ts">
import { computed, ref } from 'vue'

const firstName = ref('Michael')
const lastName = ref('Hoffmann')
const array = ref([])

const fullName = computed(() => {
  firstName.value = 'Mike' // side effect
  return `${firstName.value} ${lastName.value}`
})

const reversedArray = computed(() => array.value.reverse()) // side effect, original array is mutated
</script>

Now let's change the code and remove the side effects:

Code without side effectsComponent.vue
<script setup lang="ts">
import { computed, ref } from 'vue'

const firstName = ref('Michael')
const lastName = ref('Hoffmann')
const array = ref([])

const fullName = computed(() => `${firstName.value} ${lastName.value}`)
const reversedArray = computed(() => array.value.slice(0).reverse()) // .slice creates a copy of the array
</script>

Now the code is predictable and easy to understand. The computed properties fullName and reversedArray only depend on the values of firstName, lastName, and array. They don't modify the global state or the internal component state.