Corrige persistencia del selector de skin en GraphicsView

src/dashboard/scoreko-dev/views/Graphics.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { useHead } from '@unhead/vue';
-import { computed, ref, watch, watchEffect } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { graphicsSettingsReplicant } from '../../../browser_shared/replicants';
 import { t } from '../i18n';
 
@@ -60,29 +60,30 @@ const commentaryGraphic = computed(() =>
 
 const selectedScoreboardSkin = ref<string>('');
 
-watchEffect(() => {
-  const availableSkins = scoreboardGraphics.value;
+watch(
+  [scoreboardGraphics, () => graphicsSettingsReplicant?.data?.scoreboardSkin],
+  ([availableSkins, replicatedSkin]) => {
+    if (availableSkins.length === 0) {
+      selectedScoreboardSkin.value = '';
+      return;
+    }
 
-  if (availableSkins.length === 0) {
-    selectedScoreboardSkin.value = '';
-    return;
-  }
+    const hasReplicatedSkin = availableSkins.some((graphic) => graphic.file === replicatedSkin);
+    if (hasReplicatedSkin) {
+      selectedScoreboardSkin.value = replicatedSkin ?? "";
+      return;
+    }
 
-  const replicatedSkin = graphicsSettingsReplicant?.data?.scoreboardSkin ?? '';
-  const hasReplicatedSkin = availableSkins.some((graphic) => graphic.file === replicatedSkin);
-  if (hasReplicatedSkin && selectedScoreboardSkin.value !== replicatedSkin) {
-    selectedScoreboardSkin.value = replicatedSkin;
-    return;
-  }
+    const hasCurrentSkin = availableSkins.some(
+      (graphic) => graphic.file === selectedScoreboardSkin.value,
+    );
 
-  const hasCurrentSkin = availableSkins.some(
-    (graphic) => graphic.file === selectedScoreboardSkin.value,
-  );
-
-  if (!hasCurrentSkin) {
-    selectedScoreboardSkin.value = availableSkins[0]!.file;
-  }
-});
+    if (!hasCurrentSkin) {
+      selectedScoreboardSkin.value = availableSkins[0]!.file;
+    }
+  },
+  { immediate: true },
+);
 
 watch(
   selectedScoreboardSkin,