fix household creation (not sure)

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

@@ -94,10 +94,7 @@
                   icon
                   color="error"
                   variant="text"
-                  @click.stop="
-                    confirmDialog = true;
-                    deleteTarget = +item.id;
-                  "
+                  @click.stop="confirmDialog = true; deleteTarget = item.id"
                 >
                   <v-icon>
                     {{ $globals.icons.delete }}
@@ -114,7 +111,7 @@
   </v-container>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { fieldTypes } from "~/composables/forms";
 import { useGroups } from "~/composables/use-groups";
 import { useAdminHouseholds } from "~/composables/use-households";
@@ -122,30 +119,27 @@ import { validators } from "~/composables/use-validators";
 import type { HouseholdInDB } from "~/lib/api/types/household";
 import type { VForm } from "~/types/auto-forms";
 
-export default defineNuxtComponent({
-  setup() {
 definePageMeta({
   layout: "admin",
 });
 
 const i18n = useI18n();
 
-    // Set page title
 useSeoMeta({
   title: i18n.t("household.manage-households"),
 });
 
 const { groups } = useGroups();
-    const { households, refreshAllHouseholds, deleteHousehold, createHousehold } = useAdminHouseholds();
+const { households, deleteHousehold, createHousehold } = useAdminHouseholds();
 const refNewHouseholdForm = ref<VForm | null>(null);
 
-    const state = reactive({
-      createDialog: false,
-      confirmDialog: false,
-      loading: false,
-      deleteTarget: 0,
-      search: "",
-      headers: [
+const createDialog = ref(false);
+const confirmDialog = ref(false);
+const deleteTarget = ref<string>("");
+const search = ref("");
+const updateMode = ref(false);
+
+const headers = [
   {
     title: i18n.t("household.household"),
     align: "start",
@@ -157,9 +151,9 @@ export default defineNuxtComponent({
   { title: i18n.t("user.total-users"), value: "users" },
   { title: i18n.t("user.webhooks-enabled"), value: "webhookEnable" },
   { title: i18n.t("general.delete"), value: "actions" },
-      ],
-      updateMode: false,
-      createHouseholdForm: {
+];
+
+const createHouseholdForm = reactive({
   items: [
     {
       label: i18n.t("household.household-name"),
@@ -172,13 +166,12 @@ export default defineNuxtComponent({
     groupId: "",
     name: "",
   },
-      },
 });
 
 function openDialog() {
-      state.createDialog = true;
-      state.createHouseholdForm.data.name = "";
-      state.createHouseholdForm.data.groupId = "";
+  createDialog.value = true;
+  createHouseholdForm.data.name = "";
+  createHouseholdForm.data.groupId = "";
 }
 
 const router = useRouter();
@@ -191,23 +184,7 @@ export default defineNuxtComponent({
   if (!refNewHouseholdForm.value?.validate()) {
     return;
   }
-
-      state.createDialog = false;
-      await createHousehold(state.createHouseholdForm.data);
+  createDialog.value = false;
+  await createHousehold(createHouseholdForm.data);
 }
-
-    return {
-      ...toRefs(state),
-      refNewHouseholdForm,
-      groups,
-      households,
-      validators,
-      refreshAllHouseholds,
-      deleteHousehold,
-      handleCreateSubmit,
-      openDialog,
-      handleRowClick,
-    };
-  },
-});
 </script>