ui_migration fix(deps): Correcting syntax deprecations, set :key at template, >>> :deep(), v-bind on top.

webapp/src/components/appContent.vue

@@ -9,11 +9,10 @@
         class="uk-flex uk-flex-column uk-padding-remove uk-width-auto uk-height-1-1 uk-text-center"
       >
         <!-- For each top tab -->
-        <template v-for="(item, index) in topTabs">
+        <template v-for="(item, index) in topTabs" :key="item.id + '-tab-icon'">
           <!-- Render the tab icon -->
           <tabIcon
             :id="item.id + '-tab-icon'"
-            :key="item.id + '-tab-icon'"
             :tab-i-d="item.id"
             :title="item.title"
             :require-connection="true"
@@ -37,11 +36,10 @@
         <hr id="extension-tab-divider" />
 
         <!-- For each bottom tab -->
-        <template v-for="(item, index) in bottomTabs">
+        <template v-for="(item, index) in bottomTabs" :key="item.id + '-tab-icon'">
           <!-- Render the tab icon -->
           <tabIcon
             :id="item.id + '-tab-icon'"
-            :key="item.id + '-tab-icon'"
             :tab-i-d="item.id"
             :title="item.title"
             :require-connection="true"

webapp/src/components/modalComponents/calibrationWizard.vue

@@ -4,10 +4,10 @@
       <h2 class="uk-modal-title">Microscope Calibration</h2>
 
       <component
+        v-bind="currentTask.props"
         :is="currentTask.component"
         v-if="currentTask"
         :key="taskIndex"
-        v-bind="currentTask.props"
         :first="isFirstTask"
         :final="isFinalTask"
         :start-on-last="movingBackward"

webapp/src/components/modalComponents/calibrationWizardComponents/calibrationWizardTask.vue

@@ -23,10 +23,10 @@ gets very confusing.
   <div>
     <h3 v-if="title">{{ title }}</h3>
     <component
+      v-bind="currentStep.props"
       :is="currentStep.component"
       v-if="currentStep"
       :key="stepIndex"
-      v-bind="currentStep.props"
       @awaiting-user="handleAwaitingUser"
     />
     <p class="uk-text-right">

webapp/src/components/modalComponents/calibrationWizardComponents/csmSteps/focusStep.vue

@@ -47,7 +47,7 @@ export default {
   gap: 8px; /* Small space between buttons */
   margin-top: 4px; /* Gap from image */
 }
-.moveZ >>> .uk-button.uk-width-1-1 {
+.moveZ :deep(.uk-button.uk-width-1-1) {
   line-height: 50px;
   font-size: 50px !important;
   height: 60px;