multiselect partially working

src/components/Selector.vue

@@ -67,9 +67,6 @@ const { items, label, isCompareModeEnabled, index } = defineProps({
   index: Number,
 });
 
-// Emitters
-const emit = defineEmits(['update:selectedItems']);
-
 // Variables
 const currentValue = ref(null);
 
@@ -87,8 +84,9 @@ onBeforeMount(() => {
 watch(
   () => isCompareModeEnabled,
   (newValue) => {
-    if (newValue)
+    if (newValue) {
       currentValue.value = currentValue.value ? [currentValue.value] : [];
+    }
   }
 );
 
@@ -97,10 +95,56 @@ watch(currentValue, (newValue) => {
     newValue !== null &&
     (Array.isArray(newValue) ? newValue.length > 0 : true)
   ) {
-    changeCurrent(newValue);
+    selectTrack(newValue);
   }
 });
 
+watch(
+  activeTracks,
+  (newValue) => {
+    if (!isCompareModeEnabled) return;
+
+    currentValue.value.forEach((item) => {
+      if (!newValue.includes(item)) {
+        currentValue.value = currentValue.value.filter((el) => el !== item);
+      }
+    });
+  },
+  { deep: true }
+);
+
+function selectTrack(track) {
+  if (!isCompareModeEnabled) {
+    activeTracks.value = [track];
+    return;
+  }
+
+  const lastVariation = track[track.length - 1];
+
+  if (
+    activeTracks.value.length === 1 &&
+    !activeTracks.value.includes(lastVariation)
+  ) {
+    activeTracks.value.push(lastVariation);
+    return;
+  }
+
+  if (activeTracks.value.length === 2) {
+    if (activeTracks.value.includes(lastVariation)) {
+      removeTrack(track);
+    } else {
+      activeTracks.value.pop();
+      activeTracks.value.push(lastVariation);
+    }
+  }
+}
+
+function removeTrack(track) {
+  activeTracks.value = activeTracks.value.filter(
+    (activeTrack) => activeTrack.title !== track.title
+  );
+}
+
 watch(activeTracks, (newValue) => {
   if (newValue[newValue.length - 1] !== currentValue.value) {
     currentValue.value = isCompareModeEnabled ? [] : null;
@@ -108,10 +152,6 @@ watch(activeTracks, (newValue) => {
 });
 
 // Functions
-function changeCurrent(item) {
-  emit('update:selectedItems', item);
-}
-
 function getFrontViewUrl(item) {
   if (!item) return '';
   if (Array.isArray(item)) {

src/components/project/virtual-sample/DynamicView.vue

@@ -142,33 +142,6 @@ watch(isCompareModeEnabled, (newValue) => {
   }
 });
 
-function selectTrack(track) {
-  if (!isCompareModeEnabled.value) {
-    activeTracks.value = [track];
-    return;
-  }
-
-  if (activeTracks.value.length === 1 && !activeTracks.value.includes(track)) {
-    activeTracks.value.push(track);
-    return;
-  }
-
-  if (activeTracks.value.length === 2) {
-    if (activeTracks.value.includes(track)) {
-      removeTrack(track);
-    } else {
-      activeTracks.value.pop();
-      activeTracks.value.push(track);
-    }
-  }
-}
-
-function removeTrack(track) {
-  activeTracks.value = activeTracks.value.filter(
-    (activeTrack) => activeTrack.title !== track.title
-  );
-}
-
 function getCommentsCount(track) {
   let count = 0;
   for (const file of track.files) {