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

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

@@ -81,61 +81,39 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { usePageState } from "~/composables/recipe-page/shared-state";
 import type { NoUndefinedField } from "~/lib/api/types/non-generated";
 import type { Recipe } from "~/lib/api/types/recipe";
 
-export default defineNuxtComponent({
-  props: {
-    recipe: {
-      type: Object as () => NoUndefinedField<Recipe>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { isEditForm, isCookMode } = usePageState(props.recipe.slug);
+const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true });
+const { isEditForm, isCookMode } = usePageState(recipe.value.slug);
 const apiNewKey = ref("");
 
 function createApiExtra() {
-      if (!props.recipe) {
+  if (!recipe.value) {
     return;
   }
-
-      if (!props.recipe.extras) {
-        props.recipe.extras = {};
+  if (!recipe.value.extras) {
+    recipe.value.extras = {};
   }
-
   // check for duplicate keys
-      if (Object.keys(props.recipe.extras).includes(apiNewKey.value)) {
+  if (Object.keys(recipe.value.extras).includes(apiNewKey.value)) {
     return;
   }
-
-      props.recipe.extras[apiNewKey.value] = "";
-
+  recipe.value.extras[apiNewKey.value] = "";
   apiNewKey.value = "";
 }
 
 function removeApiExtra(key: string | number) {
-      if (!props.recipe) {
+  if (!recipe.value) {
     return;
   }
-
-      if (!props.recipe.extras) {
+  if (!recipe.value.extras) {
     return;
   }
-
   // eslint-disable-next-line @typescript-eslint/no-dynamic-delete
-      delete props.recipe.extras[key];
-      props.recipe.extras = { ...props.recipe.extras };
+  delete recipe.value.extras[key];
+  recipe.value.extras = { ...recipe.value.extras };
 }
-    return {
-      removeApiExtra,
-      createApiExtra,
-      apiNewKey,
-      isEditForm,
-      isCookMode,
-    };
-  },
-});
 </script>