From 2da1984b2ce994844a7808bf44cc95f2e0ac4feb Mon Sep 17 00:00:00 2001
From: syuilo <4439005+syuilo@users.noreply.github.com>
Date: Fri, 24 Apr 2026 10:36:08 +0900
Subject: [PATCH] Update MkSwitch.vue

---
 packages/frontend/src/components/MkSwitch.vue | 15 +++++++++++----
 1 file changed, 11 insertions(+), 4 deletions(-)

diff --git a/packages/frontend/src/components/MkSwitch.vue b/packages/frontend/src/components/MkSwitch.vue
index 9a2bea3616..76db5f1e47 100644
--- a/packages/frontend/src/components/MkSwitch.vue
+++ b/packages/frontend/src/components/MkSwitch.vue
@@ -27,7 +27,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 </template>
 
 <script lang="ts" setup>
-import { toRefs } from 'vue';
+import { ref, toRefs, watch } from 'vue';
 import type { Ref } from 'vue';
 import XButton from '@/components/MkSwitch.button.vue';
 import { haptic } from '@/utility/haptic.js';
@@ -44,11 +44,18 @@ const emit = defineEmits<{
 	(ev: 'change', v: boolean): void;
 }>();
 
-const checked = toRefs(props).modelValue;
+const checked = ref(props.modelValue);
+
+watch(() => props.modelValue, v => {
+	checked.value = v;
+});
+
 const toggle = () => {
 	if (props.disabled) return;
-	emit('update:modelValue', !checked.value);
-	emit('change', !checked.value);
+
+	checked.value = !checked.value;
+	emit('update:modelValue', checked.value);
+	emit('change', checked.value);
 
 	haptic();
 };