diff --git a/app/javascript/vue/protocol/step.vue b/app/javascript/vue/protocol/step.vue
index 52f00dfa4..a63fb5982 100644
--- a/app/javascript/vue/protocol/step.vue
+++ b/app/javascript/vue/protocol/step.vue
@@ -427,6 +427,9 @@
       },
       updateElement(element, skipRequest=false, callback) {
         let index = this.elements.findIndex((e) => e.id === element.id);
+
+        if (!this.elements[index]) return;
+
         this.elements[index].isNew = false;
 
         if (skipRequest) {
diff --git a/app/javascript/vue/shared/content/checklist.vue b/app/javascript/vue/shared/content/checklist.vue
index bce29cd50..3983d541f 100644
--- a/app/javascript/vue/shared/content/checklist.vue
+++ b/app/javascript/vue/shared/content/checklist.vue
@@ -38,26 +38,27 @@
         :chosenClass="'checklist-item-chosen'"
         :forceFallback="true"
         :handle="'.element-grip'"
+        item-key="id"
         :disabled="editingItem || checklistItems.length < 2 || !element.attributes.orderable.urls.reorder_url"
         @start="startReorder"
         @end="endReorder"
       >
-        <ChecklistItem
-          v-for="checklistItem in orderedChecklistItems"
-          :key="checklistItem.id"
-          :checklistItem="checklistItem"
-          :locked="locked"
-          :reordering="reordering"
-          :reorderChecklistItemUrl="element.attributes.orderable.urls.reorder_url"
-          :inRepository="inRepository"
-          :draggable="checklistItems.length > 1"
-          @editStart="editingItem = true"
-          @editEnd="editingItem = false"
-          @update="saveItem"
-          @toggle="saveItemChecked"
-          @removeItem="removeItem"
-          @component:delete="removeItem"
-        />
+        <template #item="{element}">
+          <ChecklistItem
+            :checklistItem="element"
+            :locked="locked"
+            :reordering="reordering"
+            :reorderChecklistItemUrl="this.element.attributes.orderable.urls.reorder_url"
+            :inRepository="inRepository"
+            :draggable="checklistItems.length > 1"
+            @editStart="editingItem = true"
+            @editEnd="editingItem = false"
+            @update="saveItem"
+            @toggle="saveItemChecked"
+            @removeItem="removeItem"
+            @component:delete="removeItem"
+          />
+        </template>
       </Draggable>
       <div v-if="element.attributes.orderable.urls.create_item_url && !addingNewItem"
            class="flex items-center gap-1 text-sn-blue cursor-pointer mb-2 mt-1 "
diff --git a/app/javascript/vue/shared/content/checklistItem.vue b/app/javascript/vue/shared/content/checklistItem.vue
index 9349e2f51..3db4d13a5 100644
--- a/app/javascript/vue/shared/content/checklistItem.vue
+++ b/app/javascript/vue/shared/content/checklistItem.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="content__checklist-item">
-    <div class="checklist-item-header flex rounded pl-10 ml-[-2.325rem] items-center relative w-full group/checklist-item-header" :class="{ 'locked': locked || editingText, 'editing-name': editingText }">
+  <div class="content__checklist-item pl-10 ml-[-2.325rem]">
+    <div class="checklist-item-header flex rounded items-center relative w-full group/checklist-item-header" :class="{ 'locked': locked || editingText, 'editing-name': editingText }">
       <div v-if="reorderChecklistItemUrl"
-        class="absolute h-6 cursor-grab justify-center left-0 top-0.5 px-2 tw-hidden text-sn-grey element-grip step-element-grip--draggable"
+        class="absolute h-6 cursor-grab justify-center left-[-2.325rem] top-0.5 px-2 tw-hidden text-sn-grey element-grip step-element-grip--draggable"
         :class="{ 'group-hover/checklist-item-header:flex': (!locked && !editingText && draggable) }"
       >
         <i class="sn-icon sn-icon-drag"></i>
diff --git a/app/javascript/vue/shared/reorderable_items_modal.vue b/app/javascript/vue/shared/reorderable_items_modal.vue
index 1b3c00c2e..442e0bb2c 100644
--- a/app/javascript/vue/shared/reorderable_items_modal.vue
+++ b/app/javascript/vue/shared/reorderable_items_modal.vue
@@ -15,18 +15,21 @@
             :dragClass="'step-checklist-item-drag'"
             :chosenClass="'step-checklist-item-chosen'"
             :handle="'.step-element-grip'"
+            item-key="id"
           >
-            <div v-for="(item, index) in reorderedItems" :key="item.id" class="step-element-header flex items-center">
-              <div class="step-element-grip step-element-grip--draggable">
-                <i class="sn-icon sn-icon-drag"></i>
+            <template #item="{element, index}">
+              <div class="step-element-header flex items-center">
+                <div class="step-element-grip step-element-grip--draggable">
+                  <i class="sn-icon sn-icon-drag"></i>
+                </div>
+                <div class="step-element-name text-center">
+                  <strong v-if="includeNumbers" class="step-element-number">{{ index + 1 }}</strong>
+                  <i v-if="element.attributes.icon" class="fas" :class="element.attributes.icon"></i>
+                  <span :title="nameWithFallbacks(element)" v-if="nameWithFallbacks(element)">{{ nameWithFallbacks(element) }}</span>
+                  <span :title="element.attributes.placeholder" v-else class="step-element-name-placeholder">{{ element.attributes.placeholder }}</span>
+                </div>
               </div>
-              <div class="step-element-name text-center">
-                <strong v-if="includeNumbers" class="step-element-number">{{ index + 1 }}</strong>
-                <i v-if="item.attributes.icon" class="fas" :class="item.attributes.icon"></i>
-                <span :title="nameWithFallbacks(item)" v-if="nameWithFallbacks(item)">{{ nameWithFallbacks(item) }}</span>
-                <span :title="item.attributes.placeholder" v-else class="step-element-name-placeholder">{{ item.attributes.placeholder }}</span>
-              </div>
-            </div>
+            </template>
           </Draggable>
         </div>
       </div>
diff --git a/package.json b/package.json
index 0f929c600..5762e91ca 100644
--- a/package.json
+++ b/package.json
@@ -82,7 +82,7 @@
     "vue-loader": "^16.0.0",
     "vue-turbolinks": "^2.2.1",
     "vue3-perfect-scrollbar": "^1.6.1",
-    "vuedraggable": "^2.24.3",
+    "vuedraggable": "^4.1.0",
     "webpack": "^5.64.4",
     "webpack-cli": "^4.10.0",
     "webpack-manifest-plugin": "^1.3.2",
diff --git a/yarn.lock b/yarn.lock
index 899d73507..86c5875d1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6774,10 +6774,10 @@ socks@^2.6.2:
     ip "^2.0.0"
     smart-buffer "^4.2.0"
 
-sortablejs@1.10.2:
-  version "1.10.2"
-  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.10.2.tgz#6e40364d913f98b85a14f6678f92b5c1221f5290"
-  integrity sha512-YkPGufevysvfwn5rfdlGyrGjt7/CRHwvRPogD/lC+TnvcN29jDpCifKP+rBqf+LRldfXSTh+0CGLcSg0VIxq3A==
+sortablejs@1.14.0:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.14.0.tgz#6d2e17ccbdb25f464734df621d4f35d4ab35b3d8"
+  integrity sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==
 
 source-list-map@^2.0.0:
   version "2.0.1"
@@ -7488,12 +7488,12 @@ vue@^3.3.4:
     "@vue/server-renderer" "3.3.4"
     "@vue/shared" "3.3.4"
 
-vuedraggable@^2.24.3:
-  version "2.24.3"
-  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-2.24.3.tgz#43c93849b746a24ce503e123d5b259c701ba0d19"
-  integrity sha512-6/HDXi92GzB+Hcs9fC6PAAozK1RLt1ewPTLjK0anTYguXLAeySDmcnqE8IC0xa7shvSzRjQXq3/+dsZ7ETGF3g==
+vuedraggable@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/vuedraggable/-/vuedraggable-4.1.0.tgz#edece68adb8a4d9e06accff9dfc9040e66852270"
+  integrity sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==
   dependencies:
-    sortablejs "1.10.2"
+    sortablejs "1.14.0"
 
 w3c-hr-time@^1.0.2:
   version "1.0.2"