From 1f51a0b3aef4592c614c479b1bce66046eecb40e Mon Sep 17 00:00:00 2001
From: Jakob Scheid
 <jakob.scheid@developers.internal.seekra.jcloud-services.ddns.net>
Date: Thu, 6 Aug 2026 23:23:21 +0200
Subject: [PATCH 1/2] fix(settings): make selection reactive

Selection now uses computed with getter and setter.
---
 src/features/settings/components/Selection.vue | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/features/settings/components/Selection.vue b/src/features/settings/components/Selection.vue
index 07c5fc4..864ca9a 100644
--- a/src/features/settings/components/Selection.vue
+++ b/src/features/settings/components/Selection.vue
@@ -54,10 +54,9 @@ const props = defineProps({
 const store = useSettingsStore();
 
 const optionType = computed(() => props.setting.allowMultiple ? 'checkbox' : 'radio');
-const selected = ref(normalizeSelectedValue(store.get(props.path) ?? props.setting.default));
-
-watch(selected, (newValue) => {
-    store.set(props.path, newValue);
+const selected = computed({
+    get: () => normalizeSelectedValue(store.get(props.path) ?? props.setting.default),
+    set: (value) => store.set(props.path, value)
 });
 
 const labelId = useId();

From 53bd67b7a09c58aa4f79df817d32a7d2b07b486e Mon Sep 17 00:00:00 2001
From: Jakob Scheid
 <jakob.scheid@developers.internal.seekra.jcloud-services.ddns.net>
Date: Thu, 6 Aug 2026 23:24:09 +0200
Subject: [PATCH 2/2] test(settings): add tests for selection reactivity

---
 .../components/__tests__/Selection.test.js    | 26 +++++++++++++++++++
 1 file changed, 26 insertions(+)

diff --git a/src/features/settings/components/__tests__/Selection.test.js b/src/features/settings/components/__tests__/Selection.test.js
index d29c44b..73319f4 100644
--- a/src/features/settings/components/__tests__/Selection.test.js
+++ b/src/features/settings/components/__tests__/Selection.test.js
@@ -90,6 +90,32 @@ describe('Selection', () => {
         expect(inputsChecked).toStrictEqual([false, true, false]);
     });
 
+    test('reacts on store change', async () => {
+        const wrapper = getWrapper({
+            options: exampleOptions,
+            piniaOptions: {
+                setupStores: () => {
+                    const store = useSettingsStore();
+                    store.set('selection', 'o1');
+                }
+            }
+        });
+        const settings = useSettingsStore();
+
+        {
+            const inputs = wrapper.findAll('input');
+            const inputsChecked = getChecked(inputs);
+            expect(inputsChecked).toStrictEqual([false, true, false]);
+        }
+        {
+            settings.set('selection', 'o2');
+            await nextTick();
+            const inputs = wrapper.findAll('input');
+            const inputsChecked = getChecked(inputs);
+            expect(inputsChecked).toStrictEqual([false, false, true]);
+        }
+    });
+
     test('shows multiple values from store', () => {
         const wrapper = getWrapper({
             options: exampleOptions,