Doing a partial fix of VirtualMachine volume

Upgraded the vuedraggable dependency and fixed most of the issues I found. It appears to be working with a console warning. We likely want to switch to a different better supported library.

package.json

@@ -10,7 +10,8 @@
     "cache-loader": "^4.1.0",
     "color": "4.2.3",
     "ip": "2.0.1",
-    "node-polyfill-webpack-plugin": "^3.0.0"
+    "node-polyfill-webpack-plugin": "^3.0.0",
+    "vuedraggable": "^4.1.0"
   },
   "resolutions": {
     "@types/node": "~20.10.0",
@@ -38,4 +39,4 @@
     "publish-pkgs": "./node_modules/@rancher/shell/scripts/extension/publish",
     "parse-tag-name": "./node_modules/@rancher/shell/scripts/extension/parse-tag-name"
   }
-}
+}

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/index.vue

@@ -233,7 +233,7 @@ export default {
     },
 
     update() {
-      this.$emit('input', this.rows);
+      this.$emit('update:value', this.rows);
     },
 
     deleteVolume() {
@@ -267,13 +267,14 @@ export default {
       label-key="harvester.virtualMachine.volume.dragTip"
     />
     <draggable
-      v-model:value="rows"
+      v-model="rows"
       :disabled="isView"
       @end="update"
+      tag="transition-group"
+      :item-key="() => null"
     >
-      <transition-group>
-        <div
-          v-for="(volume, i) in rows" :key="i">
+      <template #item="{element: volume, index: i}">
+        <div :key="volume.name">
           <InfoBox class="box">
             <button
               v-if="!isView"
@@ -326,7 +327,7 @@ export default {
             <div>
               <component
                 :is="componentFor(volume.source)"
-                v-model:value="rows[i]"
+                :value="rows[i]"
                 :rows="rows"
                 :namespace="namespace"
                 :is-create="isCreate"
@@ -375,7 +376,7 @@ export default {
             />
           </InfoBox>
         </div>
-      </transition-group>
+      </template>
     </draggable>
     <Banner
       v-if="showVolumeTip"

yarn.lock

@@ -12605,6 +12605,11 @@ sortablejs@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-map-js@>=0.6.2 <2.0.0", source-map-js@^1.0.1, source-map-js@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
@@ -13734,6 +13739,13 @@ vuedraggable@2.24.3:
   dependencies:
     sortablejs "1.10.2"
 
+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.14.0"
+
 vuex@~4.0.0:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-4.0.2.tgz#f896dbd5bf2a0e963f00c67e9b610de749ccacc9"