Computed Properties

/*
Computed properties are properties which are usually generated based on reactive data which are cached and only update when dependencies change.
*/

<template>
<p>{{ data.number }}</p>
<p>This number is {{ oddOrEven }}</p>

<button @click="newNumber(5)">Set the number<button/>
</template>

<script setup>
import { reactive, computed } from 'vue'

const data = reactive({
	number: 1
})

const newNumber = number => {
	data.number = number
}

// when data.number changes, computed property will update
const oddOrEven = computed(() => {
	if (data.numbet % 2 === 0) return 'even'
	return 'odd'
})
</script>