Vue 3 Essentials - Computed properties

SetupWithComputed.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 { ref, computed } from "vue";

export default {
  setup() {
    const capacity = ref(3);
    const attending = ref(['Colt', 'Raina', 'John']);

    const spacesLeft = computed(() => {
      return capacity.value - attending.value.length;
    });

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

    return { capacity, increaseCapacity, spacesLeft };
  },
}
</script>