diff --git a/frontend/app/components/Domain/Group/GroupPreferencesEditor.vue b/frontend/app/components/Domain/Group/GroupPreferencesEditor.vue
index e00c163a3..5fdf51523 100644
--- a/frontend/app/components/Domain/Group/GroupPreferencesEditor.vue
+++ b/frontend/app/components/Domain/Group/GroupPreferencesEditor.vue
@@ -3,7 +3,7 @@
     <BaseCardSectionTitle :title="$t('group.group-preferences')" />
     <div class="mb-6">
       <v-checkbox
-        v-model="preferences.privateGroup"
+        v-model="local.privateGroup"
         hide-details
         density="compact"
         color="primary"
@@ -21,7 +21,7 @@
     </div>
     <div class="mb-6">
       <v-checkbox
-        v-model="preferences.showAnnouncements"
+        v-model="local.showAnnouncements"
         hide-details
         density="compact"
         color="primary"
@@ -40,4 +40,6 @@
 import type { ReadGroupPreferences } from "~/lib/api/types/user";
 
 const preferences = defineModel<ReadGroupPreferences>({ required: true });
+const local = reactive({ ...preferences.value });
+watch(local, (newVal) => { preferences.value = { ...newVal }; });
 </script>
diff --git a/frontend/app/components/Domain/Household/HouseholdPreferencesEditor.vue b/frontend/app/components/Domain/Household/HouseholdPreferencesEditor.vue
index 6c24e033a..dc3205cc6 100644
--- a/frontend/app/components/Domain/Household/HouseholdPreferencesEditor.vue
+++ b/frontend/app/components/Domain/Household/HouseholdPreferencesEditor.vue
@@ -2,7 +2,7 @@
   <div v-if="preferences">
     <BaseCardSectionTitle :title="$t('household.household-preferences')" />
     <div class="mb-6">
-      <v-checkbox v-model="preferences.privateHousehold" hide-details density="compact" :label="$t('household.private-household')" color="primary" />
+      <v-checkbox v-model="local.privateHousehold" hide-details density="compact" :label="$t('household.private-household')" color="primary" />
       <div class="ml-8">
         <p class="text-subtitle-2 my-0 py-0">
           {{ $t("household.private-household-description") }}
@@ -11,7 +11,7 @@
       </div>
     </div>
     <div class="mb-6">
-      <v-checkbox v-model="preferences.lockRecipeEditsFromOtherHouseholds" hide-details density="compact" :label="$t('household.lock-recipe-edits-from-other-households')" color="primary" />
+      <v-checkbox v-model="local.lockRecipeEditsFromOtherHouseholds" hide-details density="compact" :label="$t('household.lock-recipe-edits-from-other-households')" color="primary" />
       <div class="ml-8">
         <p class="text-subtitle-2 my-0 py-0">
           {{ $t("household.lock-recipe-edits-from-other-households-description") }}
@@ -20,7 +20,7 @@
     </div>
     <div class="mb-6">
       <v-checkbox
-        v-model="preferences.showAnnouncements"
+        v-model="local.showAnnouncements"
         hide-details
         density="compact"
         color="primary"
@@ -33,7 +33,7 @@
       </div>
     </div>
     <v-select
-      v-model="preferences.firstDayOfWeek"
+      v-model="local.firstDayOfWeek"
       :prepend-icon="$globals.icons.calendarWeekBegin"
       :items="allDays"
       item-title="name"
@@ -48,7 +48,7 @@
     </BaseCardSectionTitle>
     <div class="preference-container">
       <div v-for="p in recipePreferences" :key="p.key">
-        <v-checkbox v-model="preferences[p.key]" hide-details density="compact" :label="p.label" color="primary" />
+        <v-checkbox v-model="local[p.key]" hide-details density="compact" :label="p.label" color="primary" />
         <p class="ml-8 text-subtitle-2 my-0 py-0">
           {{ p.description }}
         </p>
@@ -61,6 +61,9 @@
 import type { ReadHouseholdPreferences } from "~/lib/api/types/household";
 
 const preferences = defineModel<ReadHouseholdPreferences>({ required: true });
+const local = reactive({ ...preferences.value });
+watch(local, (newVal) => { preferences.value = { ...newVal }; });
+
 const i18n = useI18n();
 
 type Preference = {