Vue Composition vs Options API

demo.vue

<template>
  <UsersRepo>
    <template v-slot="{ isLoading, fetch, users }">
      <button
        v-if="users.length === 0"
        @click="fetch"
      >
        Fetch Users
      </button>

      <Menu
        v-if="!isLoading"
        :options="users"
        class="absolute z-10 w-40"
      >
        <template v-slot:activator="{ listeners }">
          <button v-on="listeners">Open Menu</button>
        </template>

        <template v-slot:option="{ select, isSelected, option }">
          <button
            :class="isSelected ? 'selected' : ''"
            @click="select"
          >
            {{ option.name }}
          </div>
        </template>
      </Menu>
    </template>
  </Users>
</template>

<!-- Versus -->

<template>
  <button
    v-if="users.length === 0"
    @click="fetch"
  >
    Fetch Users
  </button>
  
  <div class="absolute z-10 w-40">
    <button v-on="activator.listeners">
      Open Menu
    </button>

    <div
      v-for="option in options"
      :key="option.name"
      :class="option.isSelected ? 'selected' : ''"
      @click="option.select"
    >
      {{ option.name }}
    </div>
  </div>
</template>

<script setup>
  const { users, fetch, isLoading } = useUserRepo()
  const { activator, options } = useMenu(users)
  
  return {
    fetch,
    isLoading,

    activator,
    options,
  }
</script>