Improve task buttons collection and dynamic image handling in MyWashStart

src/views/dashboards/userDashboard/wash/MyWashStart.vue

@@ -237,11 +237,13 @@ const getButtonsToPress = () => {
   // Loop through the buttons keys in all visible tasks and gather the unique ones that are not completed
   const buttons = new Set();
   for (const task of activeTasks.value) {
+    if (!completedTasks.value[task.id]) {
       console.warn(`MyWashStart [${instanceId}]: Task ${task.id} has buttons:`, task.buttons);
-      for (const button of task.buttons) {
-        if (parseInt(button)) {
-          buttons.add(parseInt(button));
-        }
+        for (const button of task.buttons) {
+          if (parseInt(button)) {
+            buttons.add(parseInt(button));
+          }
+      }
     }
   }
   return Array.from(buttons);
@@ -1126,7 +1128,7 @@ const onClickDepartmentName = () => {
 watch([completedTasks, activeTasks], () => {
   console.warn('Completed tasks or active tasks changed');
   machineStartCurrentStep.value = getCompletedButtons();
-});
+}, { deep: true });
 
 </script>
 
@@ -1501,7 +1503,7 @@ watch([completedTasks, activeTasks], () => {
                 </div>
                 <!-- Dynamic machine UI for tasks -->
                 <div v-if="dynamicImageUrl" class="mb-4">
-                  <img :src="dynamicImageUrl" @error="dynamicImageUrl = null" alt="Machine status" style="max-width: 100%; height: auto; border-radius: 4px; display: block; margin-left: auto; margin-right: auto;">
+                  <img :key="machineStartCurrentStep" :src="dynamicImageUrl" @error="dynamicImageUrl = null" alt="Machine status" style="max-width: 100%; height: auto; border-radius: 4px; display: block; margin-left: auto; margin-right: auto;">
                 </div>
                 <!-- Tasks -->
                 <div v-show="allVisibleQuestionsAnswered && !editAnswers" class="notification is-info is-light mb-4">