Nuxt 3 Architecture Question: Separating Logic from Components

<script setup lang="ts">
const { users, pending, error, refresh, activeUsers, findUserById } = useUsers()
</script>

<template>
  <div>
    <div v-if="pending">Loading...</div>
    <div v-else-if="error">{{ error.message }}</div>
    <ul>
      <li v-for="user in activeUsers" :key="user.id">
        {{ user.name }}
      </li>
    </ul>
    <button @click="refresh">Reload</button>
    <div>
      <strong>Lookup user 1:</strong>
      {{ findUserById(1)?.name ?? 'Not found' }}
    </div>
  </div>
</template>

import { computed } from 'vue'

export function useUsers() {
  const { data: users, pending, error, refresh } = useFetch('/api/users')

  // Example computed property
  const activeUsers = computed(() =>
    (users.value ?? []).filter(u => u.isActive)
  )

  // Example function
  function findUserById(id: number) {
    return (users.value ?? []).find(u => u.id === id)
  }

  return { users, pending, error, refresh, activeUsers, findUserById }
}