diff --git a/src/client/components/dialog.vue b/src/client/components/dialog.vue
index c40f3bd0e7..0cc7fd28bc 100644
--- a/src/client/components/dialog.vue
+++ b/src/client/components/dialog.vue
@@ -59,6 +59,8 @@ import MkSignin from './signin.vue';
 import parseAcct from '../../misc/acct/parse';
 
 export default defineComponent({
+	emits: ['done', 'closed'],
+
 	components: {
 		MkButton,
 		MkInput,
diff --git a/src/client/components/ui/switch.vue b/src/client/components/ui/switch.vue
index 7e70376c98..0064dc95ab 100644
--- a/src/client/components/ui/switch.vue
+++ b/src/client/components/ui/switch.vue
@@ -28,10 +28,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 export default defineComponent({
-	model: {
-		prop: 'value',
-		event: 'change'
-	},
 	props: {
 		value: {
 			type: Boolean,
@@ -50,7 +46,7 @@ export default defineComponent({
 	methods: {
 		toggle() {
 			if (this.disabled) return;
-			this.$emit('change', !this.checked);
+			this.$emit('update:value', !this.checked);
 		}
 	}
 });
diff --git a/src/client/pages/instance/instance.vue b/src/client/pages/instance/instance.vue
index bfbf9f9afc..a8dd18b638 100644
--- a/src/client/pages/instance/instance.vue
+++ b/src/client/pages/instance/instance.vue
@@ -98,7 +98,7 @@
 		<div class="operations">
 			<span class="label">{{ $t('operations') }}</span>
 			<mk-switch v-model:value="isSuspended" class="switch">{{ $t('stopActivityDelivery') }}</mk-switch>
-			<mk-switch :value="isBlocked" class="switch" @change="changeBlock">{{ $t('blockThisInstance') }}</mk-switch>
+			<mk-switch :value="isBlocked" class="switch" @update:value="changeBlock">{{ $t('blockThisInstance') }}</mk-switch>
 			<details>
 				<summary>{{ $t('deleteAllFiles') }}</summary>
 				<mk-button @click="deleteAllFiles()" style="margin: 0.5em 0 0.5em 0;"><fa :icon="faTrashAlt"/> {{ $t('deleteAllFiles') }}</mk-button>
diff --git a/src/client/pages/instance/settings.vue b/src/client/pages/instance/settings.vue
index 49ae165b13..05b06df40a 100644
--- a/src/client/pages/instance/settings.vue
+++ b/src/client/pages/instance/settings.vue
@@ -23,19 +23,19 @@
 			<mk-input v-model:value="maxNoteTextLength" type="number" :save="() => save()" style="margin:0;"><template #icon><fa :icon="faPencilAlt"/></template>{{ $t('maxNoteTextLength') }}</mk-input>
 		</div>
 		<div class="_content">
-			<mk-switch v-model:value="enableLocalTimeline" @change="save()">{{ $t('enableLocalTimeline') }}</mk-switch>
-			<mk-switch v-model:value="enableGlobalTimeline" @change="save()">{{ $t('enableGlobalTimeline') }}</mk-switch>
+			<mk-switch v-model:value="enableLocalTimeline" @update:value="save()">{{ $t('enableLocalTimeline') }}</mk-switch>
+			<mk-switch v-model:value="enableGlobalTimeline" @update:value="save()">{{ $t('enableGlobalTimeline') }}</mk-switch>
 			<mk-info>{{ $t('disablingTimelinesInfo') }}</mk-info>
 		</div>
 		<div class="_content">
-			<mk-switch v-model:value="useStarForReactionFallback" @change="save()">{{ $t('useStarForReactionFallback') }}</mk-switch>
+			<mk-switch v-model:value="useStarForReactionFallback" @update:value="save()">{{ $t('useStarForReactionFallback') }}</mk-switch>
 		</div>
 	</section>
 
 	<section class="_card _vMargin info">
 		<div class="_title"><fa :icon="faUser"/> {{ $t('registration') }}</div>
 		<div class="_content">
-			<mk-switch v-model:value="enableRegistration" @change="save()">{{ $t('enableRegistration') }}</mk-switch>
+			<mk-switch v-model:value="enableRegistration" @update:value="save()">{{ $t('enableRegistration') }}</mk-switch>
 			<mk-button v-if="!enableRegistration" @click="invite">{{ $t('invite') }}</mk-button>
 		</div>
 	</section>
@@ -79,7 +79,7 @@
 	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faEnvelope" /> {{ $t('emailConfig') }}</div>
 		<div class="_content">
-			<mk-switch v-model:value="enableEmail" @change="save()">{{ $t('enableEmail') }}<template #desc>{{ $t('emailConfigInfo') }}</template></mk-switch>
+			<mk-switch v-model:value="enableEmail" @update:value="save()">{{ $t('enableEmail') }}<template #desc>{{ $t('emailConfigInfo') }}</template></mk-switch>
 			<mk-input v-model:value="email" type="email" :disabled="!enableEmail">{{ $t('email') }}</mk-input>
 			<div><b>{{ $t('smtpConfig') }}</b></div>
 			<div class="_inputs">
diff --git a/src/client/pages/instance/users.user.vue b/src/client/pages/instance/users.user.vue
index 580b8f3553..259c8496b6 100644
--- a/src/client/pages/instance/users.user.vue
+++ b/src/client/pages/instance/users.user.vue
@@ -14,9 +14,9 @@
 		</div>
 		<div class="_content actions">
 			<div style="flex: 1; padding-left: 1em;">
-				<mk-switch v-if="user.host == null && $store.state.i.isAdmin && (this.moderator || !user.isAdmin)" @change="toggleModerator()" v-model:value="moderator">{{ $t('moderator') }}</mk-switch>
-				<mk-switch @change="toggleSilence()" v-model:value="silenced">{{ $t('silence') }}</mk-switch>
-				<mk-switch @change="toggleSuspend()" v-model:value="suspended">{{ $t('suspend') }}</mk-switch>
+				<mk-switch v-if="user.host == null && $store.state.i.isAdmin && (this.moderator || !user.isAdmin)" @update:value="toggleModerator()" v-model:value="moderator">{{ $t('moderator') }}</mk-switch>
+				<mk-switch @update:value="toggleSilence()" v-model:value="silenced">{{ $t('silence') }}</mk-switch>
+				<mk-switch @update:value="toggleSuspend()" v-model:value="suspended">{{ $t('suspend') }}</mk-switch>
 			</div>
 			<div style="flex: 1; padding-left: 1em;">
 				<mk-button @click="openProfile"><fa :icon="faExternalLinkSquareAlt"/> {{ $t('profile')}}</mk-button>
diff --git a/src/client/pages/my-settings/2fa.vue b/src/client/pages/my-settings/2fa.vue
index 6d29c9b56e..94320b5b8b 100644
--- a/src/client/pages/my-settings/2fa.vue
+++ b/src/client/pages/my-settings/2fa.vue
@@ -20,7 +20,7 @@
 					</div>
 				</div>
 
-				<mk-switch v-model:value="usePasswordLessLogin" @change="updatePasswordLessLogin" v-if="$store.state.i.securityKeysList.length > 0">{{ $t('passwordLessLogin') }}</mk-switch>
+				<mk-switch v-model:value="usePasswordLessLogin" @update:value="updatePasswordLessLogin" v-if="$store.state.i.securityKeysList.length > 0">{{ $t('passwordLessLogin') }}</mk-switch>
 
 				<mk-info warn v-if="registration && registration.error">{{ $t('error') }} {{ registration.error }}</mk-info>
 				<mk-button v-if="!registration || registration.error" @click="addSecurityKey">{{ $t('_2fa.registerKey') }}</mk-button>
diff --git a/src/client/pages/my-settings/index.vue b/src/client/pages/my-settings/index.vue
index 71ac2ea49d..06dff11ef8 100644
--- a/src/client/pages/my-settings/index.vue
+++ b/src/client/pages/my-settings/index.vue
@@ -9,10 +9,10 @@
 	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faCog"/> {{ $t('general') }}</div>
 		<div class="_content">
-			<mk-switch v-model:value="$store.state.i.autoWatch" @change="onChangeAutoWatch">
+			<mk-switch v-model:value="$store.state.i.autoWatch" @update:value="onChangeAutoWatch">
 				{{ $t('autoNoteWatch') }}<template #desc>{{ $t('autoNoteWatchDescription') }}</template>
 			</mk-switch>
-			<mk-switch v-model:value="$store.state.i.injectFeaturedNote" @change="onChangeInjectFeaturedNote">
+			<mk-switch v-model:value="$store.state.i.injectFeaturedNote" @update:value="onChangeInjectFeaturedNote">
 				{{ $t('showFeaturedNotesInTimeline') }}
 			</mk-switch>
 		</div>
diff --git a/src/client/pages/my-settings/privacy.vue b/src/client/pages/my-settings/privacy.vue
index a4553938d9..48ebb432cd 100644
--- a/src/client/pages/my-settings/privacy.vue
+++ b/src/client/pages/my-settings/privacy.vue
@@ -2,11 +2,11 @@
 <section class="_card">
 	<div class="_title"><fa :icon="faLock"/> {{ $t('privacy') }}</div>
 	<div class="_content">
-		<mk-switch v-model:value="isLocked" @change="save()">{{ $t('makeFollowManuallyApprove') }}</mk-switch>
-		<mk-switch v-model:value="autoAcceptFollowed" v-if="isLocked" @change="save()">{{ $t('autoAcceptFollowed') }}</mk-switch>
+		<mk-switch v-model:value="isLocked" @update:value="save()">{{ $t('makeFollowManuallyApprove') }}</mk-switch>
+		<mk-switch v-model:value="autoAcceptFollowed" v-if="isLocked" @update:value="save()">{{ $t('autoAcceptFollowed') }}</mk-switch>
 	</div>
 	<div class="_content">
-		<mk-switch v-model:value="rememberNoteVisibility" @change="save()">{{ $t('rememberNoteVisibility') }}</mk-switch>
+		<mk-switch v-model:value="rememberNoteVisibility" @update:value="save()">{{ $t('rememberNoteVisibility') }}</mk-switch>
 		<mk-select v-model:value="defaultNoteVisibility" style="margin-bottom: 8px;" v-if="!rememberNoteVisibility">
 			<template #label>{{ $t('defaultNoteVisibility') }}</template>
 			<option value="public">{{ $t('_visibility.public') }}</option>
diff --git a/src/client/pages/preferences/plugins.vue b/src/client/pages/preferences/plugins.vue
index 9873a18382..fde4b22152 100644
--- a/src/client/pages/preferences/plugins.vue
+++ b/src/client/pages/preferences/plugins.vue
@@ -19,7 +19,7 @@
 			</mk-select>
 			<template v-if="selectedPlugin">
 				<div style="margin: -8px 0 8px 0;">
-					<mk-switch :value="selectedPlugin.active" @change="changeActive(selectedPlugin, $event)">{{ $t('makeActive') }}</mk-switch>
+					<mk-switch :value="selectedPlugin.active" @update:value="changeActive(selectedPlugin, $event)">{{ $t('makeActive') }}</mk-switch>
 				</div>
 				<div class="_keyValue">
 					<div>{{ $t('version') }}:</div>
diff --git a/src/client/pages/test.vue b/src/client/pages/test.vue
index 46d9dbbc68..ed037654cd 100644
--- a/src/client/pages/test.vue
+++ b/src/client/pages/test.vue
@@ -8,6 +8,12 @@
 			<mk-input v-model:value="dialogTitle">
 				<span>Title</span>
 			</mk-input>
+			<mk-input v-model:value="dialogBody">
+				<span>Body</span>
+			</mk-input>
+			<mk-switch v-model:value="dialogCancel">
+				<span>With cancel button</span>
+			</mk-switch>
 			<mk-button @click="showDialog()">Show</mk-button>
 		</div>
 		<div class="_content">
@@ -22,11 +28,13 @@ import { defineComponent } from 'vue';
 import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 import MkButton from '../components/ui/button.vue';
 import MkInput from '../components/ui/input.vue';
+import MkSwitch from '../components/ui/switch.vue';
 
 export default defineComponent({
 	components: {
 		MkButton,
 		MkInput,
+		MkSwitch,
 	},
 
 	metaInfo() {
@@ -37,8 +45,10 @@ export default defineComponent({
 
 	data() {
 		return {
-			dialogTitle: 'Title',
+			dialogTitle: 'Hello',
+			dialogBody: 'World!',
 			dialogResult: null,
+			dialogCancel: false,
 			faExclamationTriangle
 		}
 	},
@@ -47,6 +57,8 @@ export default defineComponent({
 		async showDialog() {
 			this.dialogResult = await this.$store.dispatch('showDialog', {
 				title: this.dialogTitle,
+				text: this.dialogBody,
+				showCancelButton: this.dialogCancel,
 			});
 		}
 	}