Vue3 migration - vue-migration.js launch + shell compatibility fixes

Signed-off-by: Francesco Torchia <francesco.torchia@suse.com>

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials/AccessCredentialsUsers.vue

@@ -141,7 +141,7 @@ export default {
 <template>
   <div class="vm__credentials-users">
     <LabeledSelect
-      v-model="selectedUser"
+      v-model:value="selectedUser"
       :options="userOptions"
       :label="t('harvester.virtualMachine.accessCredentials.injectSSH.users')"
       :taggable="multiple"
@@ -167,7 +167,7 @@ export default {
 
       <template #content>
         <LabeledInput
-          v-model="newUsername"
+          v-model:value="newUsername"
           :label="t('harvester.virtualMachine.input.username')"
           class="mb-20"
           required

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

@@ -152,7 +152,7 @@ export default {
   <div>
     <Banner class="mb-20" color="info" :label="t('harvester.virtualMachine.accessCredentials.tips')" />
 
-    <div v-for="(row, i) in rows" :key="row.id">
+    <div v-for="(row, i) in rows" :key="i">
       <InfoBox class="volume-source">
         <button v-if="isEdit" type="button" class="role-link btn btn-sm remove-vol" @click="remove(row)">
           <i class="icon icon-x" />
@@ -165,7 +165,7 @@ export default {
         <div>
           <component
             :is="componentFor(row.source)"
-            v-model="rows[i]"
+            v-model:value="rows[i]"
             :rows="rows"
             :resource="resource"
             :user-options="userOptions"

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials/type/basicAuth.vue

@@ -61,10 +61,10 @@ export default {
 </script>
 
 <template>
-  <div class="row" @input="update">
+  <div class="row" @update:value="update">
     <div class="col span-6">
       <AccessCredentialsUsers
-        v-model="value.username"
+        v-model:value="value.username"
         :resource="resource"
         :user-options="userOptions"
         :multiple="false"
@@ -76,7 +76,7 @@ export default {
     <div class="col span-6">
       <Password
         ref="password"
-        v-model="value.newPassword"
+        v-model:value="value.newPassword"
         :mode="mode"
         :disabled="mode !== 'edit'"
         :label="t('harvester.virtualMachine.input.password')"

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineAccessCredentials/type/sshkey.vue

@@ -61,7 +61,7 @@ export default {
     <div class="columns row">
       <div class="col span-6">
         <AccessCredentialsUsers
-          v-model="value.users"
+          v-model:value="value.users"
           :resource="resource"
           :user-options="userOptions"
           :mode="mode"
@@ -72,7 +72,7 @@ export default {
       </div>
       <div class="col span-6">
         <SSHKey
-          v-model="value.sshkeys"
+          v-model:value="value.sshkeys"
           class="mb-20"
           :namespace="resource.metadata.namespace"
           :mode="mode"

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineCloudConfig/DataTemplate.vue

@@ -117,7 +117,7 @@ export default {
 
     <LabeledSelect
       v-if="!isView"
-      v-model="id"
+      v-model:value="id"
       class="mb-20"
       :options="options"
       :disabled="viewCode"
@@ -127,7 +127,7 @@ export default {
     <div class="resource-yaml">
       <YamlEditor
         ref="yaml"
-        v-model="yamlScript"
+        v-model:value="yamlScript"
         class="yaml-editor"
         :editor-mode="editorMode"
       />
@@ -138,7 +138,7 @@ export default {
 <style lang="scss" scoped>
 $yaml-height: 200px;
 
-::v-deep .resource-yaml {
+:deep() .resource-yaml {
   flex: 1;
   display: flex;
   flex-direction: column;

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

@@ -200,7 +200,7 @@ export default {
     <div class="mb-20">
       <DataTemplate
         ref="userTemplate"
-        v-model="userScript"
+        v-model:value="userScript"
         type="user"
         :view-code="viewCode"
         :mode="mode"
@@ -215,7 +215,7 @@ export default {
     <div class="mb-20">
       <DataTemplate
         ref="networkTemplate"
-        v-model="networkScript"
+        v-model:value="networkScript"
         type="network"
         :view-code="viewCode"
         :mode="mode"
@@ -240,7 +240,7 @@ export default {
 
       <template #content>
         <LabeledInput
-          v-model="cloudTemplateName"
+          v-model:value="cloudTemplateName"
           :label="t('harvester.virtualMachine.input.name')"
           class="mb-20"
           required
@@ -251,7 +251,7 @@ export default {
           <div class="resource-yaml">
             <YamlEditor
               ref="createTemplate"
-              v-model="cloudTemplate"
+              v-model:value="cloudTemplate"
               class="yaml-editor"
               :editor-mode="editorMode"
             />
@@ -270,7 +270,7 @@ $yaml-height: 350px;
   overflow: auto;
 }
 
-::v-deep .resource-yaml {
+:deep() .resource-yaml {
   flex: 1;
   display: flex;
   flex-direction: column;

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineCpuMemory.vue

@@ -77,7 +77,7 @@ export default {
     <div class="col span-6">
       <InputOrDisplay name="CPU" :value="cupDisplay" :mode="mode" class="mb-10">
         <UnitInput
-          v-model="localCpu"
+          v-model:value="localCpu"
           v-int-number
           label="CPU"
           suffix="C"
@@ -86,7 +86,7 @@ export default {
           :disabled="disabled"
           :mode="mode"
           class="mb-20"
-          @input="change"
+          @update:value="change"
         />
       </InputOrDisplay>
     </div>
@@ -94,7 +94,7 @@ export default {
     <div class="col span-6">
       <InputOrDisplay :name="t('harvester.virtualMachine.input.memory')" :value="memoryDisplay" :mode="mode" class="mb-10">
         <UnitInput
-          v-model="localMemory"
+          v-model:value="localMemory"
           v-int-number
           :label="t('harvester.virtualMachine.input.memory')"
           :mode="mode"
@@ -105,7 +105,7 @@ export default {
           :disabled="disabled"
           required
           class="mb-20"
-          @input="change"
+          @update:value="change"
         />
       </InputOrDisplay>
     </div>

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineNetwork/base.vue

@@ -198,12 +198,12 @@ export default {
           :mode="mode"
         >
           <LabeledInput
-            v-model="value.name"
+            v-model:value="value.name"
             :label="t('harvester.fields.name')"
             required
             :mode="mode"
             :disabled="isDisabled"
-            @input="update"
+            @update:value="update"
           />
         </InputOrDisplay>
       </div>
@@ -218,13 +218,13 @@ export default {
           :mode="mode"
         >
           <LabeledSelect
-            v-model="value.model"
+            v-model:value="value.model"
             :label="t('harvester.fields.model')"
             :disabled="isDisabled"
             :options="modelOption"
             :mode="mode"
             required
-            @input="update"
+            @update:value="update"
           />
         </InputOrDisplay>
       </div>
@@ -241,13 +241,13 @@ export default {
           :mode="mode"
         >
           <LabeledSelect
-            v-model="value.networkName"
+            v-model:value="value.networkName"
             :label="t('harvester.fields.network')"
             :options="allNetworkOption"
             :mode="mode"
             required
             :disabled="isDisabled"
-            @input="updateNetworkName"
+            @update:value="updateNetworkName"
           />
         </InputOrDisplay>
       </div>
@@ -262,12 +262,12 @@ export default {
           :mode="mode"
         >
           <LabeledSelect
-            v-model="value.type"
+            v-model:value="value.type"
             :label="t('harvester.fields.type')"
             :options="typeOption"
             :mode="mode"
             required
-            @input="update"
+            @update:value="update"
           />
         </InputOrDisplay>
       </div>
@@ -292,11 +292,11 @@ export default {
             :mode="mode"
           >
             <LabeledInput
-              v-model="value.macAddress"
+              v-model:value="value.macAddress"
               label-key="harvester.fields.macAddress"
               :mode="mode"
               :tooltip="t('harvester.virtualMachine.volume.macTip')"
-              @input="update"
+              @update:value="update"
             />
           </InputOrDisplay>
         </div>

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

@@ -125,7 +125,7 @@ export default {
 
 <template>
   <div>
-    <InfoBox v-for="(row, i) in rows" :key="i" class="infoBox">
+    <InfoBox v-for="(row, i) in rows" :key="i">
       <button v-if="!isView" type="button" class="role-link remove-vol" @click="remove(row)">
         <i class="icon icon-x" />
       </button>
@@ -133,8 +133,7 @@ export default {
       <h3> {{ t('harvester.virtualMachine.network.title') }} </h3>
 
       <Base
-        :key="rows[i].rowKeyId"
-        v-model="rows[i]"
+        v-model:value="rows[i]"
         :rows="rows"
         :mode="mode"
         :is-single="isSingle"

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachinePciDevices/CompatibilityMatrix.vue

@@ -82,18 +82,16 @@ export default {
         </div>
         <div>{{ t('harvester.pci.matrixHostName') }}</div>
       </div>
-      <div v-for="nodeName in allNodeNames" :key="nodeName" class="node-label">
+      <div  v-for="(nodeName, i) in allNodeNames" :key="i" >
         <span>  {{ nodeName }}</span>
       </div>
     </div>
-    <div v-for="deviceCRD in enabledDevices" :key="deviceCRD.metadata.name" class="device-col">
+    <div  v-for="(deviceCRD, i) in enabledDevices" :key="i" >
       <div v-clean-tooltip="deviceTooltip(deviceCRD)" class="compat-cell device-label" :class="{'text-muted': noneAvailable(deviceCRD)}">
         {{ deviceCRD.metadata.name }}
       </div>
       <div
-        v-for="nodeName in allNodeNames"
-        :key="nodeName"
-        class="compat-cell"
+         v-for="(nodeName, i) in allNodeNames" :key="i" class="compat-cell"
         :class="{'has-device': nodeHasDevice(nodeName, deviceCRD)}"
       />
     </div>

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

@@ -226,7 +226,7 @@ export default {
         <div class="row">
           <div class="col span-6">
             <LabeledSelect
-              v-model="selectedDevices"
+              v-model:value="selectedDevices"
               label="Available PCI Devices"
               searchable
               multiple
@@ -244,7 +244,7 @@ export default {
           <div class="col span-12 text-muted">
             Compatible hosts:
             <!-- eslint-disable-next-line vue/no-parsing-error -->
-            <span v-for="(node, idx) in compatibleNodes" :key="node">{{ node }}{{ idx < compatibleNodes.length-1 ? ', ' : '' }}</span>
+            <span v-for="(node, idx) in compatibleNodes" :key="idx">{{ node }}{{ idx < compatibleNodes.length-1 ? ', ' : '' }}</span>
           </div>
         </div>
         <div v-else-if="selectedDevices.length" class="text-error">

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineReserved.vue

@@ -38,13 +38,13 @@ export default {
 
 <template>
   <UnitInput
-    v-model="memory"
+    v-model:value="memory"
     v-int-number
     :label="t('harvester.virtualMachine.input.reservedMemory')"
     :mode="mode"
     :input-exponent="2"
     :increment="1024"
     :output-modifier="true"
-    @input="change"
+    @update:value="change"
   />
 </template>

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineSSHKey.vue

@@ -239,7 +239,7 @@ export default {
 <template>
   <div>
     <LabeledSelect
-      v-model="checkedSsh"
+      v-model:value="checkedSsh"
       :label="t('harvester.virtualMachine.input.sshKey')"
       :taggable="true"
       :mode="mode"
@@ -247,7 +247,7 @@ export default {
       :searchable="searchable"
       :disabled="disabled"
       :options="sshOption"
-      @input="update"
+      @update:value="update"
     />
 
     <ModalWithCard
@@ -264,7 +264,7 @@ export default {
 
       <template #content>
         <LabeledInput
-          v-model="sshName"
+          v-model:value="sshName"
           :label="t('harvester.virtualMachine.input.name')"
           class="mb-20"
           required
@@ -272,7 +272,7 @@ export default {
         />
 
         <LabeledInput
-          v-model="publicKey"
+          v-model:value="publicKey"
           :label="t('harvester.virtualMachine.input.sshKeyValue')"
           :min-height="160"
           class="mb-20"

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

@@ -169,7 +169,7 @@ export default {
       <div class="row">
         <div class="col span-6">
           <LabeledSelect
-            v-model="selectedDevices"
+            v-model:value="selectedDevices"
             label="Available vGPU Devices"
             searchable
             multiple
@@ -187,7 +187,7 @@ export default {
         <div class="col span-12 text-muted">
           Compatible hosts:
           <!-- eslint-disable-next-line vue/no-parsing-error -->
-          <span v-for="(node, idx) in compatibleNodes" :key="node">{{ node }}{{ idx < compatibleNodes.length-1 ? ', ' : '' }}</span>
+          <span v-for="(node, idx) in compatibleNodes" :key="idx">{{ node }}{{ idx < compatibleNodes.length-1 ? ', ' : '' }}</span>
         </div>
       </div>
       <div v-else-if="selectedDevices.length" class="text-error">

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

@@ -267,15 +267,13 @@ export default {
       label-key="harvester.virtualMachine.volume.dragTip"
     />
     <draggable
-      v-model="rows"
+      v-model:value="rows"
       :disabled="isView"
       @end="update"
     >
       <transition-group>
         <div
-          v-for="(volume, i) in rows"
-          :key="volume.id"
-        >
+          v-for="(volume, i) in rows" :key="i">
           <InfoBox class="box">
             <button
               v-if="!isView"
@@ -328,7 +326,7 @@ export default {
             <div>
               <component
                 :is="componentFor(volume.source)"
-                v-model="rows[i]"
+                v-model:value="rows[i]"
                 :rows="rows"
                 :namespace="namespace"
                 :is-create="isCreate"

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/container.vue

@@ -59,11 +59,11 @@ export default {
           :mode="mode"
         >
           <LabeledInput
-            v-model="value.name"
+            v-model:value="value.name"
             :label="t('harvester.fields.name')"
             required
             :mode="mode"
-            @input="update"
+            @update:value="update"
           />
         </InputOrDisplay>
       </div>
@@ -78,12 +78,12 @@ export default {
           :mode="mode"
         >
           <LabeledSelect
-            v-model="value.type"
+            v-model:value="value.type"
             :label="t('harvester.fields.type')"
             :options="VOLUME_TYPE"
             :mode="mode"
             required
-            @input="update"
+            @update:value="update"
           />
         </InputOrDisplay>
       </div>
@@ -100,11 +100,11 @@ export default {
           :mode="mode"
         >
           <LabeledInput
-            v-model="value.container"
+            v-model:value="value.container"
             :label="t('harvester.virtualMachine.volume.dockerImage')"
             :mode="mode"
             required
-            @input="update"
+            @update:value="update"
           />
         </InputOrDisplay>
       </div>
@@ -119,11 +119,11 @@ export default {
           :mode="mode"
         >
           <LabeledSelect
-            v-model="value.bus"
+            v-model:value="value.bus"
             :label="t('harvester.virtualMachine.volume.bus')"
             :options="InterfaceOption"
             :mode="mode"
-            @input="update"
+            @update:value="update"
           />
         </InputOrDisplay>
       </div>

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/existing.vue

@@ -177,11 +177,11 @@ export default {
           :mode="mode"
         >
           <LabeledInput
-            v-model="value.name"
+            v-model:value="value.name"
             :label="t('harvester.fields.name')"
             :mode="mode"
             required
-            @input="update"
+            @update:value="update"
           />
         </InputOrDisplay>
       </div>
@@ -196,12 +196,12 @@ export default {
           :mode="mode"
         >
           <LabeledSelect
-            v-model="value.type"
+            v-model:value="value.type"
             :label="t('harvester.fields.type')"
             :mode="mode"
             :options="VOLUME_TYPE"
             required
-            @input="update"
+            @update:value="update"
           />
         </InputOrDisplay>
       </div>
@@ -218,13 +218,13 @@ export default {
           :mode="mode"
         >
           <LabeledSelect
-            v-model="value.volumeName"
+            v-model:value="value.volumeName"
             :disabled="isDisabled"
             :label="t('harvester.fields.volume')"
             :mode="mode"
             :options="volumeOption"
             required
-            @input="update"
+            @update:value="update"
           />
         </InputOrDisplay>
       </div>
@@ -239,14 +239,14 @@ export default {
           :mode="mode"
         >
           <UnitInput
-            v-model="value.size"
+            v-model:value="value.size"
             :output-modifier="true"
             :increment="1024"
             :input-exponent="3"
             :label="t('harvester.fields.size')"
             :mode="mode"
             :disabled="true"
-            @input="update"
+            @update:value="update"
           />
         </InputOrDisplay>
       </div>
@@ -264,11 +264,11 @@ export default {
           :mode="mode"
         >
           <LabeledInput
-            v-model="image"
+            v-model:value="image"
             :label="t('harvester.fields.image')"
             :mode="mode"
             :disabled="true"
-            @input="update"
+            @update:value="update"
           />
         </InputOrDisplay>
       </div>
@@ -283,13 +283,13 @@ export default {
           :mode="mode"
         >
           <LabeledSelect
-            v-model="value.bus"
+            v-model:value="value.bus"
             :label="t('harvester.virtualMachine.volume.bus')"
             :mode="mode"
             :options="InterfaceOption"
             :disabled="true"
             required
-            @input="update"
+            @update:value="update"
           />
         </InputOrDisplay>
       </div>

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/vmImage.vue

@@ -181,11 +181,11 @@ export default {
       >
         <InputOrDisplay :name="t('harvester.fields.name')" :value="value.name" :mode="mode">
           <LabeledInput
-            v-model="value.name"
+            v-model:value="value.name"
             :label="t('harvester.fields.name')"
             required
             :mode="mode"
-            @input="update"
+            @update:value="update"
           />
         </InputOrDisplay>
       </div>
@@ -200,11 +200,11 @@ export default {
           :mode="mode"
         >
           <LabeledSelect
-            v-model="value.type"
+            v-model:value="value.type"
             :label="t('harvester.fields.type')"
             :options="VOLUME_TYPE"
             :mode="mode"
-            @input="update"
+            @update:value="update"
           />
         </InputOrDisplay>
       </div>
@@ -221,14 +221,14 @@ export default {
           :mode="mode"
         >
           <LabeledSelect
-            v-model="value.image"
+            v-model:value="value.image"
             :disabled="idx === 0 && !isCreate && !value.newCreateId && isVirtualType"
             :label="t('harvester.fields.image')"
             :options="imagesOption"
             :mode="mode"
             :searchable="true"
             :required="validateRequired"
-            @input="onImageChange"
+            @update:value="onImageChange"
           />
         </InputOrDisplay>
       </div>
@@ -243,7 +243,7 @@ export default {
           :mode="mode"
         >
           <UnitInput
-            v-model="value.size"
+            v-model:value="value.size"
             v-int-number
             :output-modifier="true"
             :increment="1024"
@@ -252,7 +252,7 @@ export default {
             :mode="mode"
             :required="validateRequired"
             suffix="GiB"
-            @input="update"
+            @update:value="update"
           />
         </InputOrDisplay>
       </div>
@@ -269,11 +269,11 @@ export default {
           :mode="mode"
         >
           <LabeledSelect
-            v-model="value.bus"
+            v-model:value="value.bus"
             :label="t('harvester.virtualMachine.volume.bus')"
             :mode="mode"
             :options="InterfaceOption"
-            @input="update"
+            @update:value="update"
           />
         </InputOrDisplay>
       </div>

pkg/harvester/edit/kubevirt.io.virtualmachine/VirtualMachineVolume/type/volume.vue

@@ -134,11 +134,11 @@ export default {
           :mode="mode"
         >
           <LabeledInput
-            v-model="value.name"
+            v-model:value="value.name"
             :label="t('harvester.fields.name')"
             :mode="mode"
             required
-            @input="update"
+            @update:value="update"
           />
         </InputOrDisplay>
       </div>
@@ -153,12 +153,12 @@ export default {
           :mode="mode"
         >
           <LabeledSelect
-            v-model="value.type"
+            v-model:value="value.type"
             :label="t('harvester.fields.type')"
             :options="VOLUME_TYPE"
             required
             :mode="mode"
-            @input="update"
+            @update:value="update"
           />
         </InputOrDisplay>
       </div>
@@ -175,13 +175,13 @@ export default {
           :mode="mode"
         >
           <LabeledSelect
-            v-model="value.storageClassName"
+            v-model:value="value.storageClassName"
             :options="storageClassOptions"
             :label="t('harvester.storage.storageClass.label')"
             :mode="mode"
             :disabled="isDisabled"
             :required="validateRequired"
-            @input="update"
+            @update:value="update"
           />
         </InputOrDisplay>
       </div>
@@ -195,7 +195,7 @@ export default {
           :mode="mode"
         >
           <UnitInput
-            v-model="value.size"
+            v-model:value="value.size"
             v-int-number
             :output-modifier="true"
             :increment="1024"
@@ -203,7 +203,7 @@ export default {
             :mode="mode"
             :required="validateRequired"
             :label="t('harvester.fields.size')"
-            @input="update"
+            @update:value="update"
           />
         </InputOrDisplay>
       </div>
@@ -216,12 +216,12 @@ export default {
       >
         <InputOrDisplay :name="t('harvester.virtualMachine.volume.bus')" :value="value.bus" :mode="mode">
           <LabeledSelect
-            v-model="value.bus"
+            v-model:value="value.bus"
             :label="t('harvester.virtualMachine.volume.bus')"
             :mode="mode"
             :options="InterfaceOption"
             required
-            @input="update"
+            @update:value="update"
           />
         </InputOrDisplay>
       </div>

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

@@ -446,7 +446,7 @@ export default {
   >
     <RadioGroup
       v-if="isCreate"
-      v-model="isSingle"
+      v-model:value="isSingle"
       class="mb-20 vm-radio-group"
       name="createInstanceMode"
       :options="[true,false]"
@@ -454,7 +454,7 @@ export default {
     />
 
     <NameNsDescription
-      v-model="value"
+      v-model:value="value"
       :mode="mode"
       :has-extra="!isSingle"
       :name-label="nameLabel"
@@ -471,14 +471,14 @@ export default {
           type="number"
           :label="t('harvester.virtualMachine.instance.multiple.count')"
           required
-          @input="validateCount"
+          @update:value="validateCount"
         />
       </template>
     </NameNsDescription>
 
     <Checkbox
       v-if="isCreate"
-      v-model="useTemplate"
+      v-model:value="useTemplate"
       class="check mb-20"
       type="checkbox"
       label-key="harvester.virtualMachine.useTemplate.label"
@@ -490,16 +490,16 @@ export default {
     >
       <div class="col span-6">
         <LabeledSelect
-          v-model="templateId"
+          v-model:value="templateId"
           label-key="harvester.virtualMachine.useTemplate.template.label"
           :options="templateOptions"
-          @input="updateTemplateId"
+          @update:value="updateTemplateId"
         />
       </div>
 
       <div class="col span-6">
         <LabeledSelect
-          v-model="templateVersionId"
+          v-model:value="templateVersionId"
           label-key="harvester.virtualMachine.useTemplate.version.label"
           :options="versionOptions"
         />
@@ -522,7 +522,7 @@ export default {
         />
 
         <SSHKey
-          v-model="sshKey"
+          v-model:value="sshKey"
           class="mb-20"
           :create-namespace="true"
           :namespace="value.metadata.namespace"
@@ -539,7 +539,7 @@ export default {
         :weight="-1"
       >
         <Volume
-          v-model="diskRows"
+          v-model:value="diskRows"
           :mode="mode"
           :custom-volume-mode="customVolumeMode"
           :namespace="value.metadata.namespace"
@@ -555,7 +555,7 @@ export default {
         :weight="-2"
       >
         <Network
-          v-model="networkRows"
+          v-model:value="networkRows"
           :mode="mode"
           :is-single="isSingle"
         />
@@ -568,7 +568,6 @@ export default {
       >
         <template #default="{active}">
           <NodeScheduling
-            :key="active"
             :mode="mode"
             :value="spec.template.spec"
             :nodes="nodesIdOptions"
@@ -583,7 +582,6 @@ export default {
       >
         <template #default="{active}">
           <PodAffinity
-            :key="active"
             :mode="mode"
             :value="spec.template.spec"
             :nodes="nodes"
@@ -627,7 +625,7 @@ export default {
         :weight="-7"
       >
         <AccessCredentials
-          v-model="accessCredentials"
+          v-model:value="accessCredentials"
           :mode="mode"
           :resource="value"
           :is-qemu-installed="isQemuInstalled"
@@ -642,7 +640,7 @@ export default {
         <div class="row mb-20">
           <div class="col span-6">
             <LabeledSelect
-              v-model="runStrategy"
+              v-model:value="runStrategy"
               label-key="harvester.virtualMachine.runStrategy"
               :options="RunStrategys"
               :mode="mode"
@@ -651,7 +649,7 @@ export default {
 
           <div class="col span-6">
             <LabeledSelect
-              v-model="osType"
+              v-model:value="osType"
               label-key="harvester.virtualMachine.osType"
               :options="OS"
               :disabled="!isCreate"
@@ -681,7 +679,7 @@ export default {
           <div class="row mb-20">
             <div class="col span-6">
               <LabeledInput
-                v-model="hostname"
+                v-model:value="hostname"
                 :label-key="hostnameLabel"
                 :placeholder="hostPlaceholder"
                 :mode="mode"
@@ -690,7 +688,7 @@ export default {
 
             <div class="col span-6">
               <LabeledSelect
-                v-model="machineType"
+                v-model:value="machineType"
                 label-key="harvester.virtualMachine.input.MachineType"
                 :options="machineTypeOptions"
                 :mode="mode"
@@ -708,12 +706,12 @@ export default {
             </div>
             <div class="col span-6">
               <UnitInput
-                v-model="terminationGracePeriodSeconds"
+                v-model:value="terminationGracePeriodSeconds"
                 :suffix="terminationGracePeriodSeconds == 1 ? 'Second' : 'Seconds'"
                 :label="t('harvester.virtualMachine.terminationGracePeriodSeconds.label')"
                 :mode="mode"
                 positive
-                @input="updateTerminationGracePeriodSeconds"
+                @update:value="updateTerminationGracePeriodSeconds"
               />
             </div>
           </div>
@@ -732,7 +730,7 @@ export default {
         />
 
         <Checkbox
-          v-model="installUSBTablet"
+          v-model:value="installUSBTablet"
           class="check mt-20"
           type="checkbox"
           tooltip-key="harvester.virtualMachine.usbTip"
@@ -741,17 +739,17 @@ export default {
         />
 
         <Checkbox
-          v-model="installAgent"
+          v-model:value="installAgent"
           class="check"
           type="checkbox"
           :disabled="isWindows"
           label-key="harvester.virtualMachine.installAgent"
           :mode="mode"
-          @input="updateAgent"
+          @update:value="updateAgent"
         />
 
         <Checkbox
-          v-model="tpmEnabled"
+          v-model:value="tpmEnabled"
           class="check"
           type="checkbox"
           label-key="harvester.virtualMachine.advancedOptions.tpm"
@@ -759,7 +757,7 @@ export default {
         />
 
         <Checkbox
-          v-model="efiEnabled"
+          v-model:value="efiEnabled"
           class="check"
           type="checkbox"
           :label="t('harvester.virtualMachine.efiEnabled')"
@@ -768,7 +766,7 @@ export default {
 
         <Checkbox
           v-if="efiEnabled"
-          v-model="secureBoot"
+          v-model:value="secureBoot"
           class="check"
           type="checkbox"
           :label="t('harvester.virtualMachine.secureBoot')"
@@ -799,7 +797,7 @@ export default {
               :mode="mode"
               :read-allowed="false"
               :value-can-be-empty="true"
-              @input="value.setInstanceLabels($event)"
+              @update:value="value.setInstanceLabels($event)"
             />
           </template>
         </Labels>
@@ -815,7 +813,7 @@ export default {
 
 <style lang="scss" scoped>
 #vm {
-  ::v-deep .vm-radio-group .radio-group {
+  :deep() .vm-radio-group .radio-group {
     display: flex;
     .radio-container {
       margin-right: 30px;