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

frontend/components/Domain/Recipe/RecipePage/RecipePage.vue

@@ -28,7 +28,7 @@
             data management and mutation system we're using.
           -->
           <div>
-            <RecipePageInfoEditor v-if="isEditMode" :recipe="recipe" :landscape="landscape" />
+            <RecipePageInfoEditor v-if="isEditMode" v-model="recipe" />
           </div>
           <div>
             <RecipePageEditorToolbar v-if="isEditForm" v-model="recipe" />

frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInfoEditor.vue

@@ -79,58 +79,43 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { validators } from "~/composables/use-validators";
 import type { NoUndefinedField } from "~/lib/api/types/non-generated";
 import type { Recipe } from "~/lib/api/types/recipe";
 
-export default defineNuxtComponent({
+const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true });
-  props: {
+
-    recipe: {
+const recipeServings = computed<number>({
-      type: Object as () => NoUndefinedField<Recipe>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const recipeServings = computed<number>({
   get() {
-        return props.recipe.recipeServings;
+    return recipe.value.recipeServings;
   },
   set(val) {
     validateInput(val.toString(), "recipeServings");
   },
-    });
+});
 
-    const recipeYieldQuantity = computed<number>({
+const recipeYieldQuantity = computed<number>({
   get() {
-        return props.recipe.recipeYieldQuantity;
+    return recipe.value.recipeYieldQuantity;
   },
   set(val) {
     validateInput(val.toString(), "recipeYieldQuantity");
   },
-    });
+});
 
-    function validateInput(value: string | null, property: "recipeServings" | "recipeYieldQuantity") {
+function validateInput(value: string | null, property: "recipeServings" | "recipeYieldQuantity") {
   if (!value) {
-        props.recipe[property] = 0;
+    recipe.value[property] = 0;
     return;
   }
 
   const number = parseFloat(value.replace(/[^0-9.]/g, ""));
   if (isNaN(number) || number <= 0) {
-        props.recipe[property] = 0;
+    recipe.value[property] = 0;
     return;
   }
 
-      props.recipe[property] = number;
+  recipe.value[property] = number;
-    }
+}
-
-    return {
-      validators,
-      recipeServings,
-      recipeYieldQuantity,
-      validateInput,
-    };
-  },
-});
 </script>