diff --git a/webapp/src/components/modalComponents/calibrationWizard.vue b/webapp/src/components/modalComponents/calibrationWizard.vue
index 056c33d4..6f76ee27 100644
--- a/webapp/src/components/modalComponents/calibrationWizard.vue
+++ b/webapp/src/components/modalComponents/calibrationWizard.vue
@@ -24,6 +24,8 @@ import welcomeStep from "./calibrationWizardComponents/welcomeStep.vue";
 import cameraCalibrationTask from "./calibrationWizardComponents/cameraCalibrationTask.vue";
 import cameraStageMappingTask from "./calibrationWizardComponents/cameraStageMappingTask.vue";
 import finalStep from "./calibrationWizardComponents/finalStep.vue";
+// vue3 migration
+import { markRaw } from "vue";
 
 export default {
   name: "CalibrationWizard",
@@ -105,7 +107,7 @@ export default {
       // Optionally include the welcome screen
       if (includeWelcome) {
         tasks.push({
-          component: singleStepTask,
+          component: markRaw(singleStepTask),
           props: { stepComponent: welcomeStep },
         });
       }
@@ -113,12 +115,12 @@ export default {
       // Add calibration task for each thing
       for (const thing of thingsToCal) {
         const taskComponent = this.availableCalibrationTasks[thing];
-        tasks.push({ component: taskComponent });
+        tasks.push({ component: markRaw(taskComponent), props: {} });
       }
 
       // Always include the final step
       tasks.push({
-        component: singleStepTask,
+        component: markRaw(singleStepTask),
         props: { stepComponent: finalStep },
       });