i think i fixed the underlying issue

frontend/composables/use-groups.ts

@@ -45,28 +45,11 @@ export const useGroupSelf = function () {
 export const useGroups = function () {
   const api = useUserApi();
   const loading = ref(false);
+  const groups = ref<GroupSummary[] | null>(null);
 
-  function getAllGroups() {
+  async function getAllGroups() {
     loading.value = true;
-    const asyncKey = String(Date.now());
-    const { data: groups } = useAsyncData(asyncKey, async () => {
-      const { data } = await api.groups.getAll(1, -1, { orderBy: "name", orderDirection: "asc" }); ;
-
-      if (data) {
-        return data.items;
-      }
-      else {
-        return null;
-      }
-    });
-
-    loading.value = false;
-    return groups;
-  }
-
-  async function refreshAllGroups() {
-    loading.value = true;
-    const { data } = await api.groups.getAll(1, -1, { orderBy: "name", orderDirection: "asc" }); ;
+    const { data } = await api.groups.getAll(1, -1, { orderBy: "name", orderDirection: "asc" });
 
     if (data) {
       groups.value = data.items;
@@ -78,11 +61,15 @@ export const useGroups = function () {
     loading.value = false;
   }
 
+  async function refreshAllGroups() {
+    await getAllGroups();
+  }
+
   async function deleteGroup(id: string | number) {
     loading.value = true;
     const { data } = await api.groups.deleteOne(id);
     loading.value = false;
-    refreshAllGroups();
+    await refreshAllGroups();
     return data;
   }
 
@@ -93,9 +80,13 @@ export const useGroups = function () {
     if (data && groups.value) {
       groups.value.push(data);
     }
+    loading.value = false;
   }
 
-  const groups = getAllGroups();
+  // Initialize data on first call
+  if (!groups.value) {
+    getAllGroups();
+  }
 
   return { groups, getAllGroups, refreshAllGroups, deleteGroup, createGroup };
 };

frontend/composables/use-households.ts

@@ -48,28 +48,11 @@ export const useHouseholdSelf = function () {
 export const useAdminHouseholds = function () {
   const api = useAdminApi();
   const loading = ref(false);
+  const households = ref<HouseholdInDB[] | null>(null);
 
-  function getAllHouseholds() {
+  async function getAllHouseholds() {
     loading.value = true;
-    const asyncKey = String(Date.now());
-    const { data: households } = useAsyncData(asyncKey, async () => {
-      const { data } = await api.households.getAll(1, -1, { orderBy: "name, group.name", orderDirection: "asc" });
-
-      if (data) {
-        return data.items;
-      }
-      else {
-        return null;
-      }
-    });
-
-    loading.value = false;
-    return households;
-  }
-
-  async function refreshAllHouseholds() {
-    loading.value = true;
-    const { data } = await api.households.getAll(1, -1, { orderBy: "name, group.name", orderDirection: "asc" }); ;
+    const { data } = await api.households.getAll(1, -1, { orderBy: "name, group.name", orderDirection: "asc" });
 
     if (data) {
       households.value = data.items;
@@ -81,11 +64,15 @@ export const useAdminHouseholds = function () {
     loading.value = false;
   }
 
+  async function refreshAllHouseholds() {
+    await getAllHouseholds();
+  }
+
   async function deleteHousehold(id: string | number) {
     loading.value = true;
     const { data } = await api.households.deleteOne(id);
     loading.value = false;
-    refreshAllHouseholds();
+    await refreshAllHouseholds();
     return data;
   }
 
@@ -96,9 +83,9 @@ export const useAdminHouseholds = function () {
     if (data && households.value) {
       households.value.push(data);
     }
+    loading.value = false;
   }
 
-  const households = getAllHouseholds();
   function useHouseholdsInGroup(groupIdRef: Ref<string>) {
     return computed(
       () => {
@@ -109,10 +96,14 @@ export const useAdminHouseholds = function () {
     );
   }
 
+  if (!households.value) {
+    getAllHouseholds();
+  }
+
   return {
     households,
     useHouseholdsInGroup,
-    getAllHouseholds,
+    getAllGroups: getAllHouseholds,
     refreshAllHouseholds,
     deleteHousehold,
     createHousehold,

frontend/pages/admin/manage/households/index.vue

@@ -1,5 +1,7 @@
 <template>
   <v-container fluid>
+{{ groups?.length }}
+
     <BaseDialog
       v-model="createDialog"
       :title="$t('household.create-household')"
@@ -14,7 +16,6 @@
             :items="groups"
             item-title="name"
             item-value="id"
-            :return-object="false"
             variant="filled"
             :label="$t('household.household-group')"
             :rules="[validators.required]"
@@ -131,6 +132,7 @@ useSeoMeta({
 
 const { groups } = useGroups();
 const { households, deleteHousehold, createHousehold } = useAdminHouseholds();
+
 const refNewHouseholdForm = ref<VForm | null>(null);
 
 const createDialog = ref(false);