RecipeSettingsSwitches use v-model instead of prop and turn into script setup

frontend/components/Domain/Recipe/RecipeSettingsSwitches.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
     <v-switch
-      v-for="(_, key) in modelValue"
+      v-for="(_, key) in model"
       :key="key"
-      v-model="modelValue[key]"
+      v-model="model[key]"
       color="primary"
       xs
       density="compact"
@@ -15,21 +15,15 @@
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
+import { defineModel, defineProps } from "vue";
 import type { RecipeSettings } from "~/lib/api/types/recipe";
+import { useI18n } from "#imports";
+
+defineProps<{ isOwner?: boolean }>();
+
+const model = defineModel<RecipeSettings>({ required: true });
 
-export default defineNuxtComponent({
-  props: {
-    modelValue: {
-      type: Object as () => RecipeSettings,
-      required: true,
-    },
-    isOwner: {
-      type: Boolean,
-      required: false,
-    },
-  },
-  setup() {
 const i18n = useI18n();
 const labels: Record<keyof RecipeSettings, string> = {
   public: i18n.t("recipe.public-recipe"),
@@ -40,12 +34,6 @@ export default defineNuxtComponent({
   disableAmount: i18n.t("recipe.disable-amount"),
   locked: i18n.t("recipe.locked"),
 };
-
-    return {
-      labels,
-    };
-  },
-});
 </script>
 
 <style lang="scss" scoped></style>