fixed group reactivity

src/components/haex/pass/group/index.vue

@@ -1,6 +1,6 @@
 <template>
   <UiCard
-    v-if="modelValue"
+    v-if="group"
     :title="mode === 'create' ? t('title.create') : t('title.edit')"
     icon="mdi:folder-plus-outline"
     @close="$emit('close')"
@@ -14,12 +14,12 @@
         :label="t('name')"
         :placeholder="t('name')"
         autofocus
-        v-model="modelValue.name"
+        v-model="group.name"
         ref="nameRef"
       />
 
       <UiInput
-        v-model="modelValue.description"
+        v-model="group.description"
         :check-input="check"
         :label="t('description')"
         :placeholder="t('description')"
@@ -27,11 +27,11 @@
 
       <div class="flex gap-4">
         <UiSelectIcon
-          v-model="modelValue.icon"
+          v-model="group.icon"
           default-icon="mdi:folder-outline"
         />
 
-        <UiSelectColor v-model="modelValue.color" />
+        <UiSelectColor v-model="group.color" />
       </div>
 
       <div class="flex flex-wrap justify-end gap-4">
@@ -58,9 +58,10 @@
 <script setup lang="ts">
 import type { SelectHaexPasswordsGroups } from '~~/src-tauri/database/schemas/vault'
 
-defineModel<SelectHaexPasswordsGroups | null>()
+const group = defineModel<SelectHaexPasswordsGroups | null>()
 defineEmits(['close', 'submit', 'back'])
 defineProps<{ mode: 'create' | 'edit' }>()
+
 const { t } = useI18n()
 
 const check = ref<boolean>(false)

src/components/ui/input/index.vue

@@ -16,23 +16,24 @@
 
         <div class="input-floating grow">
           <input
+            :autofocus
             :id
-            ref="inputRef"
-            v-model="input"
             :name="name ?? id"
             :placeholder="placeholder || label"
-            :type
-            :autofocus
-            class="ps-3"
             :readonly="read_only"
+            :type
+            class="ps-3"
+            ref="inputRef"
+            v-model="input"
           />
           <label
-            class="input-floating-label"
             :for="id"
+            class="input-floating-label"
           >
             {{ label }}
           </label>
         </div>
+        {{ input }}
 
         <Icon
           v-if="appendIcon"