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

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;