Vue 3 Essentials - Modularizing

event-space.js

import { ref, computed } from "vue";

export default function useEventSpace() {
  const capacity = ref(3);
  const attending = ref(['Colt', 'Raina', 'John']);
  const spacesLeft = computed(() => {
    return capacity.value - attending.value.length;
  });

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

  return { capacity, increaseCapacity, spacesLeft };
}

SetupWithComposition.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 useEventSpace from "@/event-space"; // would normally put inside of a "use/" sub directory

export default {
  setup() {
    return useEventSpace();
  },
}
</script>