Vue3 Architecture

import { ref, readonly, computed } from 'vue';
import BarAssistantClient from '@/api/BarAssistantClient';
import type { components } from '@/api/api';
import { useSaltRimToast } from '@/composables/toast';
import { useI18n } from 'vue-i18n';

export type SomeType = components['schemas']['SomeType'];

export function useSomeFeature() {
    // Reactive state
    const items = ref<SomeType[]>([]);
    const isLoading = ref(false);
    
    // Dependencies
    const toast = useSaltRimToast();
    const { t } = useI18n();

    // Mutations (the ONLY way state changes)
    async function fetchItems() {
        isLoading.value = true;
        try {
            items.value = (await BarAssistantClient.getSomething())?.data || [];
        } finally {
            isLoading.value = false;
        }
    }

    async function deleteItem(id: number) {
        isLoading.value = true;
        try {
            await BarAssistantClient.deleteSomething(id);
            items.value = items.value.filter(item => item.id !== id);
            toast.default(t('domain.delete-success'));
        } catch (e: any) {
            toast.error(e.message);
        } finally {
            isLoading.value = false;
        }
    }

    // Derived state
    const activeItems = computed(() => items.value.filter(i => i.status === 'active'));

    // Return: readonly state + mutation methods
    return {
        items: readonly(items),
        isLoading: readonly(isLoading),
        activeItems,
        fetchItems,
        deleteItem,
    };
}

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { useI18n } from 'vue-i18n';
import { useSomeFeature } from '@/composables/domain/useSomeFeature';
import { useAppState } from '@/composables/useAppState';
import { useConfirm } from '@/composables/confirm';
import { useSaltRimToast } from '@/composables/toast';
import ChildPresentationalComponent from '@/components/Domain/ChildPresentational.vue';

// Composables
const { t } = useI18n();
const appState = useAppState();
const toast = useSaltRimToast();
const confirm = useConfirm();
const { items, isLoading, fetchItems, deleteItem } = useSomeFeature();

// Local refs
const showDialog = ref(false);

// Lifecycle
onMounted(() => {
    fetchItems();
});

// Event handlers — these call composable methods, never BarAssistantClient directly
function handleDelete(id: number) {
    confirm.show(t('domain.confirm-delete'), {
        onResolved: async (dialog: { close: () => void }) => {
            await deleteItem(id);
            dialog.close();
        },
    });
}
</script>

<template>
    <PageHeader>{{ t('domain.title') }}</PageHeader>
    <div>
        <OverlayLoader v-if="isLoading" />
        <ChildPresentational 
            v-for="item in items" 
            :key="item.id" 
            :item="item"
            @delete="handleDelete(item.id)" 
        />
    </div>
</template>

<script setup lang="ts">
import FeatureComponent from '@/components/Domain/Feature.vue';
</script>

<template>
    <main>
        <FeatureComponent />
    </main>
</template>