From d09dc2b7409b876e0f090675a4175e4df7565fb5 Mon Sep 17 00:00:00 2001
From: Michael Genson <71845777+michael-genson@users.noreply.github.com>
Date: Mon, 2 Jun 2025 15:51:57 +0000
Subject: [PATCH] fix draggable instructions, kind of

---
 .../RecipePageInstructions.vue                | 23 +++++++++++++++----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
index 96aedbaa7..15d96e586 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageInstructions.vue
@@ -137,7 +137,7 @@
         :name="!drag ? 'flip-list' : ''"
       >
         <div
-          v-for="(step, index) in modelValue"
+          v-for="(step, index) in instructionList"
           :key="step.id!"
           class="list-group-item"
         >
@@ -499,10 +499,23 @@ export default defineNuxtComponent({
       showTitleEditor.value = temp;
     }
 
-    const instructionList = computed({
-      get: () => props.modelValue,
-      set: (value: RecipeStep[]) => context.emit("update:modelValue", value),
-    });
+    const instructionList = ref<RecipeStep[]>([...props.modelValue]);
+
+    watch(
+      () => props.modelValue,
+      (newVal) => {
+        instructionList.value = [...newVal];
+      },
+      { deep: true }
+    );
+
+    watch(
+      instructionList,
+      (newVal) => {
+        context.emit("update:modelValue", [...newVal]);
+      },
+      { deep: true }
+    );
 
     // ===============================================================
     // Ingredient Linker