Vue 3 Essentials - The reactive syntax

SetupWithReactive.vue

<template>
  <p>
    Spaces left: {{ spacesLeft }} out of {{ capacity }}
  </p>
  <button @click="increaseCapacity">Increase Capacity</button>
  <h2>Attending</h2>
  <ul>
    <li
      v-for="(name, index) in attending"
      :key="index"
    >
      {{ name }}
    </li>
  </ul>
</template>

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

export default {
  setup() {
    const event = reactive({
      attending: ['Colt', 'Raina', 'John'],
      capacity: 4,
      spacesLeft: computed(() => {
        return event.capacity - event.attending.length;
      }),
    });

    fucntion increaseCapacity() {
      capacity.value++;
    }

    return { ...toRefs(event), increaseCapacity };
  },
}
</script>