src/features/settings/components/SettingsInput.vue

@@ -19,7 +19,7 @@ import Icon from '@/features/icons/components/Icon.vue';
 
 import { useSettingsStore } from '../stores/settingsStore';
 
-import { computed, useId } from 'vue';
+import { computed, ref, useId, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();
@@ -35,8 +35,9 @@ const props = defineProps({
 
 const store = useSettingsStore();
 
-const inputModel = defineModel();
+const inputModel = ref(store.get(props.path));
-inputModel.value = store.get(props.path);
+let oldInputValue = inputModel.value;
+
 const inputId = useId();
 const inputLabelId = useId();
 
@@ -50,6 +51,14 @@ const hasChanged = computed(() =>
     inputModel.value !== store.get(props.path)
 );
 
+watch(store, (newValue) => {
+    const newInputValue = newValue.get(props.path);
+    if (inputModel.value === oldInputValue) {
+        inputModel.value = newInputValue;
+        oldInputValue = newInputValue;
+    };
+});
+
 const apply = function apply () {
     store.set(props.path, inputModel.value);
 };