Создание стейта компонента через reactive()

В Options API мы можем использовать data() для создания стейта компонента и обращаться к нему через this.

С помощью reactive() из Composition API можно добиться того же — гораздо удобнее, чем ref() для нескольких свойств.

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

export default {
  setup() {
    const state = reactive({
      price: 2,
      quantity: 5
    })

    const total = computed(() => {
      return state.price * state.quantity
    })

    return {
      ...toRefs(state),
      total
    }
  }
}
</script>

<template>
  <p>Цена: {{ price }}</p>
  <p>Количество: {{ quantity }}</p>
  <p>Итого: {{ total }}</p>
</template>