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

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

pkg/harvester/detail/harvesterhci.io.host/HarvesterHostDisk.vue

@@ -92,7 +92,7 @@ export default {
 </script>
 
 <template>
-  <div class="disk" @input="update">
+  <div class="disk" @update:value="update">
     <Banner
       v-if="mountedMessage"
       color="error"
@@ -107,7 +107,7 @@ export default {
           >
             <template #value>
               <div class="mt-5">
-                <Tag v-for="(prop, key) in value.tags" :key="key + prop" class="mr-5">
+                <Tag v-for="(prop, key) in value.tags" :key="key">
                   {{ prop }}
                 </Tag>
               </div>

pkg/harvester/detail/harvesterhci.io.host/HarvesterSeeder.vue

@@ -57,9 +57,7 @@ export default {
   <div>
     <div v-if="inventory.warningMessages.length > 0">
       <Banner
-        v-for="msg in inventory.warningMessages"
-        :key="msg.text"
-        color="error"
+         v-for="(msg, i) in inventory.warningMessages" :key="i" color="error"
         :label="msg.text"
       />
     </div>
@@ -117,7 +115,7 @@ export default {
     >
       <div class="col span-6">
         <RadioGroup
-          v-model="enableInventory"
+          v-model:value="enableInventory"
           :options="[
             { label: t('generic.enabled'), value: true },
             { label: t('generic.disabled'), value: false }

pkg/harvester/detail/harvesterhci.io.host/VirtualMachineInstance.vue

@@ -102,9 +102,9 @@ export default {
         default-sort-by="age"
         :rows="rows"
         key-field="_key"
-        v-on="$listeners"
+        
       >
-        <template slot="cell:state" slot-scope="scope">
+        <template cell:state="scope">
           <div class="state">
             <HarvesterVmState class="vmstate" :row="scope.row" :all-cluster-network="allClusterNetwork" />
           </div>
@@ -116,11 +116,11 @@ export default {
 
 <style lang="scss" scoped>
 #host-instances {
-  ::v-deep thead th {
+  :deep() thead th {
     vertical-align: middle;
   }
 
-  ::v-deep .state {
+  :deep() .state {
     display: flex;
 
     .vmstate {

pkg/harvester/detail/harvesterhci.io.host/VlanStatus/index.vue

@@ -87,7 +87,7 @@ export default {
     <div class="row mt-20">
       <div class="col span-12">
         <ArrayListGrouped
-          v-model="linkStatus"
+          v-model:value="linkStatus"
           :mode="mode"
           :can-remove="false"
         >

pkg/harvester/detail/harvesterhci.io.host/index.vue

@@ -378,7 +378,7 @@ export default {
     >
       <Tab name="basics" :label="t('harvester.host.tabs.basics')" :weight="4" class="bordered-table">
         <Basic
-          v-model="value"
+          v-model:value="value"
           :metrics="metrics"
           :mode="mode"
         />
@@ -394,9 +394,7 @@ export default {
         class="bordered-table"
       >
         <InfoBox
-          v-for="vlan in vlanStatuses"
-          :key="vlan.id"
-        >
+           v-for="(vlan, i) in vlanStatuses" :key="i" >
           <VlanStatus
             :value="vlan"
             :mode="mode"
@@ -420,7 +418,7 @@ export default {
             >
               <template #value>
                 <div class="mt-5">
-                  <Tag v-for="(prop, key) in longhornNode.spec.tags" :key="key + prop" class="mr-5">
+                  <Tag v-for="(prop, key) in longhornNode.spec.tags" :key="key">
                     {{ prop }}
                   </Tag>
                 </div>
@@ -429,14 +427,14 @@ export default {
           </div>
         </div>
         <ArrayListGrouped
-          v-model="newDisks"
+          v-model:value="newDisks"
           :mode="mode"
           :can-remove="false"
           :initial-empty-row="false"
         >
           <template #default="props">
             <Disk
-              v-model="props.row.value"
+              v-model:value="props.row.value"
               class="mb-20"
               :mode="mode"
               :disks="disks"