fix(wheneverImageLoaded): run callback when switching images

The bug is that the current implementation of wheneverImageLoaded 
only watches a derived boolean that only toggles when the image
goes from not-loaded to loaded. If the imageId changes from one
valid ID to another (with both returning true), the callback never fires.

Author: PaulHax

src/composables/wheneverImageLoaded.ts

@@ -1,8 +1,7 @@
 import { useImageCacheStore } from '@/src/store/image-cache';
 import { Maybe } from '@/src/types';
 import vtkImageData from '@kitware/vtk.js/Common/DataModel/ImageData';
-import { whenever } from '@vueuse/core';
-import { computed, MaybeRef, unref, WatchCallback } from 'vue';
+import { computed, MaybeRef, unref, WatchCallback, watch } from 'vue';
 
 export function wheneverImageLoaded(
   imageId: MaybeRef<Maybe<string>>,
@@ -15,11 +14,16 @@ export function wheneverImageLoaded(
     return imageCacheStore.imageById[id];
   });
   const imageIsLoaded = computed(() => image.value?.loaded.value ?? false);
-  return whenever(imageIsLoaded, (newVal, oldVal, onCleanup) => {
-    cb(
-      { id: unref(imageId)!, imageData: image.value!.getVtkImageData() },
-      undefined,
-      onCleanup
-    );
-  });
+  return watch(
+    [() => unref(imageId), imageIsLoaded],
+    ([id, loaded], _, onCleanup) => {
+      if (loaded && id) {
+        cb(
+          { id, imageData: image.value!.getVtkImageData() },
+          undefined,
+          onCleanup
+        );
+      }
+    }
+  );
 }