VueJs3: chargement des données dans un tableau

Bonjour, je rencontre un problème.

Je suis débutant sur vueJs 3 et il y a quelque chose que je ne comprend pas. Pouvez-vous m'aider ?

export function fetchCustomers(page = 1): {
  customers: Ref<CustomerInterface[] | null>;
  total: Ref<number>;
  loading: Ref<boolean>;
  error: Ref<any>;
} {
  const customers = ref<CustomerInterface[] | null>(null);
  const total = ref<number>(0);
  const loading = ref<boolean>(true);
  const error = ref<any>(null);

  (async () => {
    try {
      const response = await ApiService.get(`/admin/customers?page=${page}`);
      const data = await response.data;
      customers.value = data["hydra:member"];
      total.value = data["hydra:totalItems"];
    } catch (e) {
      error.value = e;
    } finally {
      loading.value = false;
    }
  })();

  return {
    customers,
    total,
    loading,
    error,
  };
}

ce code récupère une liste de customer, ça me retourne un tableau de customer ou null

Dans ma vue, sur la partie setup je fais

const { customers, total, loading, error } = fetchCustomers();

je passe customers à mon template, il s'agit d'un module dataTable, qui n'accepte pas null en en data

<Datatable
        :loading="loading"
        :table-header="tableHeader"
        :table-data="customers ?? []"
        :enable-items-per-page-dropdown="false"
        :total="total"
        @current-change="getCurrentPageCustomers($event)"
 ></Datatable>

table-data ne peut pas recevoir une ref qui peut être null, j'aimerais savoir comment faire pour dire, tant que je n'ai pas de valeur dans customers, ma valeur sera un tableau vide. Je fais un appel Api avec un async/await. merci d'avance

Le ternaire ci-dessus ne fonctionne pas, mon tableau ne s'actualise pas.