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,23 +15,17 @@
   </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";
 
-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> = {
+defineProps<{ isOwner?: boolean }>();
+
+const model = defineModel<RecipeSettings>({ required: true });
+
+const i18n = useI18n();
+const labels: Record<keyof RecipeSettings, string> = {
   public: i18n.t("recipe.public-recipe"),
   showNutrition: i18n.t("recipe.show-nutrition-values"),
   showAssets: i18n.t("asset.show-assets"),
@@ -39,13 +33,7 @@ export default defineNuxtComponent({
   disableComments: i18n.t("recipe.disable-comments"),
   disableAmount: i18n.t("recipe.disable-amount"),
   locked: i18n.t("recipe.locked"),
-    };
-
-    return {
-      labels,
-    };
-  },
-});
+};
 </script>
 
 <style lang="scss" scoped></style>