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

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

@@ -49,7 +49,7 @@
             -->
             <v-col v-if="!isCookMode || isEditForm" cols="12" sm="12" md="4" lg="4">
               <RecipePageIngredientToolsView v-if="!isEditForm" :recipe="recipe" :scale="scale" />
-              <RecipePageOrganizers v-if="$vuetify.display.mdAndUp" :recipe="recipe" @item-selected="chipClicked" />
+              <RecipePageOrganizers v-if="$vuetify.display.mdAndUp" v-model="recipe" @item-selected="chipClicked" />
             </v-col>
             <v-divider v-if="$vuetify.display.mdAndUp && !isCookMode" class="my-divider" :vertical="true" />
 
@@ -71,7 +71,7 @@
                 </BaseButton>
               </div>
               <div v-if="!$vuetify.display.mdAndUp">
-                <RecipePageOrganizers :recipe="recipe" />
+                <RecipePageOrganizers v-model="recipe" />
               </div>
               <RecipeNotes v-model="recipe.notes" :edit="isEditForm" />
             </v-col>

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

@@ -85,8 +85,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { usePageState, usePageUser } from "~/composables/recipe-page/shared-state";
+<script lang="ts" setup>
+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";
 import RecipeOrganizerSelector from "@/components/Domain/Recipe/RecipeOrganizerSelector.vue";
@@ -94,27 +94,6 @@ import RecipeNutrition from "~/components/Domain/Recipe/RecipeNutrition.vue";
 import RecipeChips from "@/components/Domain/Recipe/RecipeChips.vue";
 import RecipeAssets from "@/components/Domain/Recipe/RecipeAssets.vue";
 
-export default defineNuxtComponent({
-  components: {
-    RecipeOrganizerSelector,
-    RecipeNutrition,
-    RecipeChips,
-    RecipeAssets,
-  },
-  props: {
-    recipe: {
-      type: Object as () => NoUndefinedField<Recipe>,
-      required: true,
-    },
-  },
-  setup(props) {
-    const { user } = usePageUser();
-    const { isEditForm } = usePageState(props.recipe.slug);
-
-    return {
-      isEditForm,
-      user,
-    };
-  },
-});
+const recipe = defineModel<NoUndefinedField<Recipe>>({ required: true });
+const { isEditForm } = usePageState(recipe.value.slug);
 </script>