diff --git a/src/client/components/captcha.vue b/src/client/components/captcha.vue
index 8edd4842ed..80d1ed22c4 100644
--- a/src/client/components/captcha.vue
+++ b/src/client/components/captcha.vue
@@ -110,7 +110,7 @@ export default defineComponent({
 			}
 		},
 		callback(response?: string) {
-			this.$emit('input', typeof response == 'string' ? response : null);
+			this.$emit('update:value', typeof response == 'string' ? response : null);
 		},
 	},
 });
diff --git a/src/client/components/cw-button.vue b/src/client/components/cw-button.vue
index cd8e58df95..f1ec842db7 100644
--- a/src/client/components/cw-button.vue
+++ b/src/client/components/cw-button.vue
@@ -36,7 +36,7 @@ export default defineComponent({
 		length,
 
 		toggle() {
-			this.$emit('input', !this.value);
+			this.$emit('update:value', !this.value);
 		}
 	}
 });
diff --git a/src/client/components/deck/widgets-column.vue b/src/client/components/deck/widgets-column.vue
index 15b4824530..a3a3ac3048 100644
--- a/src/client/components/deck/widgets-column.vue
+++ b/src/client/components/deck/widgets-column.vue
@@ -5,7 +5,7 @@
 	<div class="wtdtxvec">
 		<template v-if="edit">
 			<header>
-				<mk-select v-model="widgetAdderSelected" style="margin-bottom: var(--margin)">
+				<mk-select v-model:value="widgetAdderSelected" style="margin-bottom: var(--margin)">
 					<template #label>{{ $t('selectWidget') }}</template>
 					<option v-for="widget in widgets" :value="widget" :key="widget">{{ $t(`_widgets.${widget}`) }}</option>
 				</mk-select>
diff --git a/src/client/components/dialog.vue b/src/client/components/dialog.vue
index 8d59662537..6b4f1cfb82 100644
--- a/src/client/components/dialog.vue
+++ b/src/client/components/dialog.vue
@@ -23,9 +23,9 @@
 				<header v-if="title" v-html="title"></header>
 				<header v-if="title == null && user">{{ $t('enterUsername') }}</header>
 				<div class="body" v-if="text" v-html="text"></div>
-				<mk-input v-if="input" v-model="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></mk-input>
-				<mk-input v-if="user" v-model="userInputValue" autofocus @keydown="onInputKeydown"><template #prefix>@</template></mk-input>
-				<mk-select v-if="select" v-model="selectedValue" autofocus>
+				<mk-input v-if="input" v-model:value="inputValue" autofocus :type="input.type || 'text'" :placeholder="input.placeholder" @keydown="onInputKeydown"></mk-input>
+				<mk-input v-if="user" v-model:value="userInputValue" autofocus @keydown="onInputKeydown"><template #prefix>@</template></mk-input>
+				<mk-select v-if="select" v-model:value="selectedValue" autofocus>
 					<template v-if="select.items">
 						<option v-for="item in select.items" :value="item.value">{{ item.text }}</option>
 					</template>
diff --git a/src/client/components/form-window.vue b/src/client/components/form-window.vue
index c6dbfc211a..921ac68ad0 100644
--- a/src/client/components/form-window.vue
+++ b/src/client/components/form-window.vue
@@ -5,19 +5,19 @@
 	</template>
 	<div class="xkpnjxcv">
 		<label v-for="item in Object.keys(form).filter(item => !form[item].hidden)" :key="item">
-			<mk-input v-if="form[item].type === 'number'" v-model="values[item]" type="number" :step="form[item].step || 1">
+			<mk-input v-if="form[item].type === 'number'" v-model:value="values[item]" type="number" :step="form[item].step || 1">
 				<span v-text="form[item].label || item"></span>
 				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
 			</mk-input>
-			<mk-input v-else-if="form[item].type === 'string' && !item.multiline" v-model="values[item]" type="text">
+			<mk-input v-else-if="form[item].type === 'string' && !item.multiline" v-model:value="values[item]" type="text">
 				<span v-text="form[item].label || item"></span>
 				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
 			</mk-input>
-			<mk-textarea v-else-if="form[item].type === 'string' && item.multiline" v-model="values[item]">
+			<mk-textarea v-else-if="form[item].type === 'string' && item.multiline" v-model:value="values[item]">
 				<span v-text="form[item].label || item"></span>
 				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
 			</mk-textarea>
-			<mk-switch v-else-if="form[item].type === 'boolean'" v-model="values[item]">
+			<mk-switch v-else-if="form[item].type === 'boolean'" v-model:value="values[item]">
 				<span v-text="form[item].label || item"></span>
 				<template v-if="form[item].description" #desc>{{ form[item].description }}</template>
 			</mk-switch>
diff --git a/src/client/components/instance-stats.vue b/src/client/components/instance-stats.vue
index 5f6e963ece..5030ab2753 100644
--- a/src/client/components/instance-stats.vue
+++ b/src/client/components/instance-stats.vue
@@ -87,7 +87,7 @@
 		<div class="_title" style="position: relative;"><fa :icon="faChartBar"/> {{ $t('statistics') }}<button @click="fetchChart" class="_button" style="position: absolute; right: 0; bottom: 0; top: 0; padding: inherit;"><fa :icon="faSync"/></button></div>
 		<div class="_content" style="margin-top: -8px;">
 			<div class="selects" style="display: flex;">
-				<mk-select v-model="chartSrc" style="margin: 0; flex: 1;">
+				<mk-select v-model:value="chartSrc" style="margin: 0; flex: 1;">
 					<optgroup :label="$t('federation')">
 						<option value="federation-instances">{{ $t('_charts.federationInstancesIncDec') }}</option>
 						<option value="federation-instances-total">{{ $t('_charts.federationInstancesTotal') }}</option>
@@ -110,7 +110,7 @@
 						<option value="drive-total">{{ $t('_charts.storageUsageTotal') }}</option>
 					</optgroup>
 				</mk-select>
-				<mk-select v-model="chartSpan" style="margin: 0;">
+				<mk-select v-model:value="chartSpan" style="margin: 0;">
 					<option value="hour">{{ $t('perHour') }}</option>
 					<option value="day">{{ $t('perDay') }}</option>
 				</mk-select>
diff --git a/src/client/components/note-preview.vue b/src/client/components/note-preview.vue
index 5dfceabab2..d038c6a3cc 100644
--- a/src/client/components/note-preview.vue
+++ b/src/client/components/note-preview.vue
@@ -6,7 +6,7 @@
 		<div class="body">
 			<p v-if="note.cw != null" class="cw">
 				<span class="text" v-if="note.cw != ''">{{ note.cw }}</span>
-				<x-cw-button v-model="showContent" :note="note"/>
+				<x-cw-button v-model:value="showContent" :note="note"/>
 			</p>
 			<div class="content" v-show="note.cw == null || showContent">
 				<x-sub-note-content class="text" :note="note"/>
diff --git a/src/client/components/note.sub.vue b/src/client/components/note.sub.vue
index 9913409b79..aa2c78e6da 100644
--- a/src/client/components/note.sub.vue
+++ b/src/client/components/note.sub.vue
@@ -7,7 +7,7 @@
 			<div class="body">
 				<p v-if="note.cw != null" class="cw">
 					<mfm v-if="note.cw != ''" class="text" :text="note.cw" :author="note.user" :i="$store.state.i" :custom-emojis="note.emojis" />
-					<x-cw-button v-model="showContent" :note="note"/>
+					<x-cw-button v-model:value="showContent" :note="note"/>
 				</p>
 				<div class="content" v-show="note.cw == null || showContent">
 					<x-sub-note-content class="text" :note="note"/>
diff --git a/src/client/components/note.vue b/src/client/components/note.vue
index 41a2a81267..c2705be0ee 100644
--- a/src/client/components/note.vue
+++ b/src/client/components/note.vue
@@ -41,7 +41,7 @@
 			<div class="body" ref="noteBody">
 				<p v-if="appearNote.cw != null" class="cw">
 				<mfm v-if="appearNote.cw != ''" class="text" :text="appearNote.cw" :author="appearNote.user" :i="$store.state.i" :custom-emojis="appearNote.emojis"/>
-					<x-cw-button v-model="showContent" :note="appearNote"/>
+					<x-cw-button v-model:value="showContent" :note="appearNote"/>
 				</p>
 				<div class="content" v-show="appearNote.cw == null || showContent">
 					<div class="text">
diff --git a/src/client/components/notification-setting-window.vue b/src/client/components/notification-setting-window.vue
index d63a3d48a5..0fdf39a5ea 100644
--- a/src/client/components/notification-setting-window.vue
+++ b/src/client/components/notification-setting-window.vue
@@ -3,7 +3,7 @@
 	<template #header>{{ $t('notificationSetting') }}</template>
 	<div class="vv94n3oa">
 		<div v-if="showGlobalToggle">
-			<mk-switch v-model="useGlobalSetting">
+			<mk-switch v-model:value="useGlobalSetting">
 				{{ $t('useGlobalSetting') }}
 				<template #desc>{{ $t('useGlobalSettingDesc') }}</template>
 			</mk-switch>
@@ -12,7 +12,7 @@
 			<mk-info>{{ $t('notificationSettingDesc') }}</mk-info>
 			<mk-button inline @click="disableAll">{{ $t('disableAll') }}</mk-button>
 			<mk-button inline @click="enableAll">{{ $t('enableAll') }}</mk-button>
-			<mk-switch v-for="type in notificationTypes" :key="type" v-model="typesMap[type]">{{ $t(`_notification._types.${type}`) }}</mk-switch>
+			<mk-switch v-for="type in notificationTypes" :key="type" v-model:value="typesMap[type]">{{ $t(`_notification._types.${type}`) }}</mk-switch>
 		</div>
 	</div>
 </x-window>
diff --git a/src/client/components/page/page.number-input.vue b/src/client/components/page/page.number-input.vue
index 1dc54e2a52..6437a3145e 100644
--- a/src/client/components/page/page.number-input.vue
+++ b/src/client/components/page/page.number-input.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<mk-input class="kudkigyw" v-model="v" type="number">{{ hpml.interpolate(value.text) }}</mk-input>
+	<mk-input class="kudkigyw" v-model:value="v" type="number">{{ hpml.interpolate(value.text) }}</mk-input>
 </div>
 </template>
 
diff --git a/src/client/components/page/page.radio-button.vue b/src/client/components/page/page.radio-button.vue
index 5add209869..959de24cb6 100644
--- a/src/client/components/page/page.radio-button.vue
+++ b/src/client/components/page/page.radio-button.vue
@@ -1,7 +1,7 @@
 <template>
 <div>
 	<div>{{ hpml.interpolate(value.title) }}</div>
-	<mk-radio v-for="x in value.values" v-model="v" :value="x" :key="x">{{ x }}</mk-radio>
+	<mk-radio v-for="x in value.values" v-model:value="v" :value="x" :key="x">{{ x }}</mk-radio>
 </div>
 </template>
 
diff --git a/src/client/components/page/page.switch.vue b/src/client/components/page/page.switch.vue
index f40013ade9..c4f3fb5d82 100644
--- a/src/client/components/page/page.switch.vue
+++ b/src/client/components/page/page.switch.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="hkcxmtwj">
-	<mk-switch v-model="v">{{ hpml.interpolate(value.text) }}</mk-switch>
+	<mk-switch v-model:value="v">{{ hpml.interpolate(value.text) }}</mk-switch>
 </div>
 </template>
 
diff --git a/src/client/components/page/page.text-input.vue b/src/client/components/page/page.text-input.vue
index d4ddf698fe..c9c450a711 100644
--- a/src/client/components/page/page.text-input.vue
+++ b/src/client/components/page/page.text-input.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<mk-input class="kudkigyw" v-model="v" type="text">{{ hpml.interpolate(value.text) }}</mk-input>
+	<mk-input class="kudkigyw" v-model:value="v" type="text">{{ hpml.interpolate(value.text) }}</mk-input>
 </div>
 </template>
 
diff --git a/src/client/components/page/page.textarea-input.vue b/src/client/components/page/page.textarea-input.vue
index fed7450352..5ead19196c 100644
--- a/src/client/components/page/page.textarea-input.vue
+++ b/src/client/components/page/page.textarea-input.vue
@@ -1,6 +1,6 @@
 <template>
 <div>
-	<mk-textarea v-model="v">{{ hpml.interpolate(value.text) }}</mk-textarea>
+	<mk-textarea v-model:value="v">{{ hpml.interpolate(value.text) }}</mk-textarea>
 </div>
 </template>
 
diff --git a/src/client/components/page/page.vue b/src/client/components/page/page.vue
index 490df8cc72..752cd70fbf 100644
--- a/src/client/components/page/page.vue
+++ b/src/client/components/page/page.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="iroscrza" :class="{ center: page.alignCenter, serif: page.font === 'serif' }" v-if="hpml">
-	<x-block v-for="child in page.content" :value="child" @input="v => updateBlock(v)" :page="page" :hpml="hpml" :key="child.id" :h="2"/>
+	<x-block v-for="child in page.content" :value="child" @onUpdate:value="v => updateBlock(v)" :page="page" :hpml="hpml" :key="child.id" :h="2"/>
 </div>
 </template>
 
diff --git a/src/client/components/poll-editor.vue b/src/client/components/poll-editor.vue
index 0376f82b50..41ba2c7efb 100644
--- a/src/client/components/poll-editor.vue
+++ b/src/client/components/poll-editor.vue
@@ -5,7 +5,7 @@
 	</p>
 	<ul ref="choices">
 		<li v-for="(choice, i) in choices" :key="i">
-			<mk-input class="input" :value="choice" @input="onInput(i, $event)">
+			<mk-input class="input" :value="choice" @onUpdate:value="onInput(i, $event)">
 				<span>{{ $t('_poll.choiceN', { n: i + 1 }) }}</span>
 			</mk-input>
 			<button @click="remove(i)" class="_button">
@@ -16,27 +16,27 @@
 	<mk-button class="add" v-if="choices.length < 10" @click="add">{{ $t('add') }}</mk-button>
 	<mk-button class="add" v-else disabled>{{ $t('_poll.noMore') }}</mk-button>
 	<section>
-		<mk-switch v-model="multiple">{{ $t('_poll.canMultipleVote') }}</mk-switch>
+		<mk-switch v-model:value="multiple">{{ $t('_poll.canMultipleVote') }}</mk-switch>
 		<div>
-			<mk-select v-model="expiration">
+			<mk-select v-model:value="expiration">
 				<template #label>{{ $t('_poll.expiration') }}</template>
 				<option value="infinite">{{ $t('_poll.infinite') }}</option>
 				<option value="at">{{ $t('_poll.at') }}</option>
 				<option value="after">{{ $t('_poll.after') }}</option>
 			</mk-select>
 			<section v-if="expiration === 'at'">
-				<mk-input v-model="atDate" type="date" class="input">
+				<mk-input v-model:value="atDate" type="date" class="input">
 					<span>{{ $t('_poll.deadlineDate') }}</span>
 				</mk-input>
-				<mk-input v-model="atTime" type="time" class="input">
+				<mk-input v-model:value="atTime" type="time" class="input">
 					<span>{{ $t('_poll.deadlineTime') }}</span>
 				</mk-input>
 			</section>
 			<section v-if="expiration === 'after'">
-				<mk-input v-model="after" type="number" class="input">
+				<mk-input v-model:value="after" type="number" class="input">
 					<span>{{ $t('_poll.duration') }}</span>
 				</mk-input>
-				<mk-select v-model="unit">
+				<mk-select v-model:value="unit">
 					<option value="second">{{ $t('_time.second') }}</option>
 					<option value="minute">{{ $t('_time.minute') }}</option>
 					<option value="hour">{{ $t('_time.hour') }}</option>
diff --git a/src/client/components/signin.vue b/src/client/components/signin.vue
index 6a13f771eb..651b559c5f 100755
--- a/src/client/components/signin.vue
+++ b/src/client/components/signin.vue
@@ -2,12 +2,12 @@
 <form class="eppvobhk" :class="{ signing, totpLogin }" @submit.prevent="onSubmit">
 	<div class="avatar" :style="{ backgroundImage: user ? `url('${ user.avatarUrl }')` : null }" v-show="withAvatar"></div>
 	<div class="normal-signin" v-if="!totpLogin">
-		<mk-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @input="onUsernameChange">
+		<mk-input v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]+$" spellcheck="false" autofocus required @onUpdate:value="onUsernameChange">
 			<span>{{ $t('username') }}</span>
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>
 		</mk-input>
-		<mk-input v-model="password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required>
+		<mk-input v-model:value="password" type="password" :with-password-toggle="true" v-if="!user || user && !user.usePasswordLessLogin" required>
 			<span>{{ $t('password') }}</span>
 			<template #prefix><fa :icon="faLock"/></template>
 		</mk-input>
@@ -28,11 +28,11 @@
 		</div>
 		<div class="twofa-group totp-group">
 			<p style="margin-bottom:0;">{{ $t('twoStepAuthentication') }}</p>
-			<mk-input v-model="password" type="password" :with-password-toggle="true" v-if="user && user.usePasswordLessLogin" required>
+			<mk-input v-model:value="password" type="password" :with-password-toggle="true" v-if="user && user.usePasswordLessLogin" required>
 				<span>{{ $t('password') }}</span>
 				<template #prefix><fa :icon="faLock"/></template>
 			</mk-input>
-			<mk-input v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false" required>
+			<mk-input v-model:value="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false" required>
 				<span>{{ $t('token') }}</span>
 				<template #prefix><fa :icon="faGavel"/></template>
 			</mk-input>
diff --git a/src/client/components/signup.vue b/src/client/components/signup.vue
index 8da92997e9..03d6190c33 100644
--- a/src/client/components/signup.vue
+++ b/src/client/components/signup.vue
@@ -1,11 +1,11 @@
 <template>
 <form class="mk-signup" @submit.prevent="onSubmit" :autocomplete="Math.random()">
 	<template v-if="meta">
-		<mk-input v-if="meta.disableRegistration" v-model="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required>
+		<mk-input v-if="meta.disableRegistration" v-model:value="invitationCode" type="text" :autocomplete="Math.random()" spellcheck="false" required>
 			<span>{{ $t('invitationCode') }}</span>
 			<template #prefix><fa :icon="faKey"/></template>
 		</mk-input>
-		<mk-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @input="onChangeUsername">
+		<mk-input v-model:value="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" spellcheck="false" required @onUpdate:value="onChangeUsername">
 			<span>{{ $t('username') }}</span>
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>
@@ -19,7 +19,7 @@
 				<span v-if="usernameState == 'max-range'" style="color:#FF1161"><fa :icon="faExclamationTriangle" fixed-width/> {{ $t('tooLong') }}</span>
 			</template>
 		</mk-input>
-		<mk-input v-model="password" type="password" :autocomplete="Math.random()" required @input="onChangePassword">
+		<mk-input v-model:value="password" type="password" :autocomplete="Math.random()" required @onUpdate:value="onChangePassword">
 			<span>{{ $t('password') }}</span>
 			<template #prefix><fa :icon="faLock"/></template>
 			<template #desc>
@@ -28,7 +28,7 @@
 				<p v-if="passwordStrength == 'high'" style="color:#3CB7B5"><fa :icon="faCheck" fixed-width/> {{ $t('strongPassword') }}</p>
 			</template>
 		</mk-input>
-		<mk-input v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @input="onChangePasswordRetype">
+		<mk-input v-model:value="retypedPassword" type="password" :autocomplete="Math.random()" required @onUpdate:value="onChangePasswordRetype">
 			<span>{{ $t('password') }} ({{ $t('retype') }})</span>
 			<template #prefix><fa :icon="faLock"/></template>
 			<template #desc>
@@ -36,13 +36,13 @@
 				<p v-if="passwordRetypeState == 'not-match'" style="color:#FF1161"><fa :icon="faExclamationTriangle" fixed-width/> {{ $t('passwordNotMatched') }}</p>
 			</template>
 		</mk-input>
-		<mk-switch v-model="ToSAgreement" v-if="meta.tosUrl">
+		<mk-switch v-model:value="ToSAgreement" v-if="meta.tosUrl">
 			<i18n-t path="agreeTo">
 				<a :href="meta.tosUrl" class="_link" target="_blank">{{ $t('tos') }}</a>
 			</i18n-t>
 		</mk-switch>
-		<captcha v-if="meta.enableHcaptcha" class="captcha" provider="hcaptcha" ref="hcaptcha" v-model="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>
-		<captcha v-if="meta.enableRecaptcha" class="captcha" provider="grecaptcha" ref="recaptcha" v-model="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/>
+		<captcha v-if="meta.enableHcaptcha" class="captcha" provider="hcaptcha" ref="hcaptcha" v-model:value="hCaptchaResponse" :sitekey="meta.hcaptchaSiteKey"/>
+		<captcha v-if="meta.enableRecaptcha" class="captcha" provider="grecaptcha" ref="recaptcha" v-model:value="reCaptchaResponse" :sitekey="meta.recaptchaSiteKey"/>
 		<mk-button type="submit" :disabled="shouldDisableSubmitting" primary>{{ $t('start') }}</mk-button>
 	</template>
 </form>
diff --git a/src/client/components/tab.vue b/src/client/components/tab.vue
index b4f1d8737b..42da4d16bf 100644
--- a/src/client/components/tab.vue
+++ b/src/client/components/tab.vue
@@ -1,6 +1,6 @@
 <template>
 <div class="pxhvhrfw" v-size="{ max: [500] }">
-	<button v-for="item in items" class="_button" @click="$emit('input', item.value)" :class="{ active: value === item.value }" :key="item.value"><fa v-if="item.icon" :icon="item.icon" class="icon"/>{{ item.label }}</button>
+	<button v-for="item in items" class="_button" @click="$emit('update:value', item.value)" :class="{ active: value === item.value }" :key="item.value"><fa v-if="item.icon" :icon="item.icon" class="icon"/>{{ item.label }}</button>
 </div>
 </template>
 
diff --git a/src/client/components/token-generate-window.vue b/src/client/components/token-generate-window.vue
index 4acb51adec..d4a8fbef41 100644
--- a/src/client/components/token-generate-window.vue
+++ b/src/client/components/token-generate-window.vue
@@ -6,13 +6,13 @@
 			<mk-info warn>{{ information }}</mk-info>
 		</div>
 		<div>
-			<mk-input v-model="name">{{ $t('name') }}</mk-input>
+			<mk-input v-model:value="name">{{ $t('name') }}</mk-input>
 		</div>
 		<div>
 			<div style="margin-bottom: 16px;"><b>{{ $t('permission') }}</b></div>
 			<mk-button inline @click="disableAll">{{ $t('disableAll') }}</mk-button>
 			<mk-button inline @click="enableAll">{{ $t('enableAll') }}</mk-button>
-			<mk-switch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</mk-switch>
+			<mk-switch v-for="kind in (initialPermissions || kinds)" :key="kind" v-model:value="permissions[kind]">{{ $t(`_permissions.${kind}`) }}</mk-switch>
 		</div>
 	</div>
 </x-window>
diff --git a/src/client/components/ui/input.vue b/src/client/components/ui/input.vue
index 654b1ef85e..3763f780c3 100644
--- a/src/client/components/ui/input.vue
+++ b/src/client/components/ui/input.vue
@@ -169,9 +169,9 @@ export default defineComponent({
 		},
 		v(v) {
 			if (this.type === 'number') {
-				this.$emit('input', parseFloat(v));
+				this.$emit('update:value', parseFloat(v));
 			} else {
-				this.$emit('input', v);
+				this.$emit('update:value', v);
 			}
 
 			this.invalid = this.$refs.input.validity.badInput;
@@ -228,7 +228,7 @@ export default defineComponent({
 		},
 		onChangeFile() {
 			this.v = Array.from((this.$refs.file as any).files);
-			this.$emit('input', this.v);
+			this.$emit('update:value', this.v);
 			this.$emit('change', this.v);
 		},
 		onInput(ev) {
diff --git a/src/client/components/ui/range.vue b/src/client/components/ui/range.vue
index 237ad7826e..b51363c14f 100644
--- a/src/client/components/ui/range.vue
+++ b/src/client/components/ui/range.vue
@@ -13,7 +13,7 @@
 		:autofocus="autofocus"
 		@focus="focused = true"
 		@blur="focused = false"
-		@input="$emit('input', $event.target.value)"
+		@input="$emit('update:value', $event.target.value)"
 	/>
 </div>
 </template>
diff --git a/src/client/components/ui/select.vue b/src/client/components/ui/select.vue
index e2708afa2e..d48bbcb1ba 100644
--- a/src/client/components/ui/select.vue
+++ b/src/client/components/ui/select.vue
@@ -58,7 +58,7 @@ export default defineComponent({
 				return this.value;
 			},
 			set(v) {
-				this.$emit('input', v);
+				this.$emit('update:value', v);
 			}
 		},
 		filled(): boolean {
diff --git a/src/client/components/ui/textarea.vue b/src/client/components/ui/textarea.vue
index ee5ac89f27..d621289a2f 100644
--- a/src/client/components/ui/textarea.vue
+++ b/src/client/components/ui/textarea.vue
@@ -74,7 +74,7 @@ export default defineComponent({
 		},
 		onInput(ev) {
 			this.changed = true;
-			this.$emit('input', ev.target.value);
+			this.$emit('update:value', ev.target.value);
 		}
 	}
 });
diff --git a/src/client/components/user-select.vue b/src/client/components/user-select.vue
index 13a5c7caeb..0d9461d86f 100644
--- a/src/client/components/user-select.vue
+++ b/src/client/components/user-select.vue
@@ -3,8 +3,8 @@
 	<template #header>{{ $t('selectUser') }}</template>
 	<div class="tbhwbxda">
 		<div class="inputs">
-			<mk-input v-model="username" class="input" @input="search" ref="username"><span>{{ $t('username') }}</span><template #prefix>@</template></mk-input>
-			<mk-input v-model="host" class="input" @input="search"><span>{{ $t('host') }}</span><template #prefix>@</template></mk-input>
+			<mk-input v-model:value="username" class="input" @onUpdate:value="search" ref="username"><span>{{ $t('username') }}</span><template #prefix>@</template></mk-input>
+			<mk-input v-model:value="host" class="input" @onUpdate:value="search"><span>{{ $t('host') }}</span><template #prefix>@</template></mk-input>
 		</div>
 		<div class="users">
 			<div class="user" v-for="user in users" :key="user.id" :class="{ selected: selected && selected.id === user.id }" @click="selected = user" @dblclick="ok()">
diff --git a/src/client/pages/channel-editor.vue b/src/client/pages/channel-editor.vue
index d69e7a0672..e3e8edd853 100644
--- a/src/client/pages/channel-editor.vue
+++ b/src/client/pages/channel-editor.vue
@@ -4,9 +4,9 @@
 
 	<div class="_card">
 		<div class="_content">
-			<mk-input v-model="name">{{ $t('name') }}</mk-input>
+			<mk-input v-model:value="name">{{ $t('name') }}</mk-input>
 
-			<mk-textarea v-model="description">{{ $t('description') }}</mk-textarea>
+			<mk-textarea v-model:value="description">{{ $t('description') }}</mk-textarea>
 
 			<div class="banner">
 				<mk-button v-if="bannerId == null" @click="setBannerImage"><fa :icon="faPlus"/> {{ $t('_channel.setBanner') }}</mk-button>
diff --git a/src/client/pages/channels.vue b/src/client/pages/channels.vue
index bd44ea5aa0..4033615a44 100644
--- a/src/client/pages/channels.vue
+++ b/src/client/pages/channels.vue
@@ -2,7 +2,7 @@
 <div>
 	<portal to="header"><fa :icon="faSatelliteDish"/>{{ $t('channel') }}</portal>
 
-	<mk-tab v-model="tab" :items="[{ label: $t('_channel.featured'), value: 'featured', icon: faFireAlt }, { label: $t('_channel.following'), value: 'following', icon: faHeart }, { label: $t('_channel.owned'), value: 'owned', icon: faEdit }]"/>
+	<mk-tab v-model:value="tab" :items="[{ label: $t('_channel.featured'), value: 'featured', icon: faFireAlt }, { label: $t('_channel.following'), value: 'following', icon: faHeart }, { label: $t('_channel.owned'), value: 'owned', icon: faEdit }]"/>
 
 	<div class="grwlizim featured" v-if="tab === 'featured'">
 		<mk-pagination :pagination="featuredPagination" #default="{items}">
diff --git a/src/client/pages/index.welcome.setup.vue b/src/client/pages/index.welcome.setup.vue
index a85b78f84e..2158c12072 100644
--- a/src/client/pages/index.welcome.setup.vue
+++ b/src/client/pages/index.welcome.setup.vue
@@ -3,12 +3,12 @@
 	<h1>Welcome to Misskey!</h1>
 	<div>
 		<p>{{ $t('intro') }}</p>
-		<mk-input v-model="username" pattern="^[a-zA-Z0-9_]{1,20}$" spellcheck="false" required>
+		<mk-input v-model:value="username" pattern="^[a-zA-Z0-9_]{1,20}$" spellcheck="false" required>
 			<span>{{ $t('username') }}</span>
 			<template #prefix>@</template>
 			<template #suffix>@{{ host }}</template>
 		</mk-input>
-		<mk-input v-model="password" type="password">
+		<mk-input v-model:value="password" type="password">
 			<span>{{ $t('password') }}</span>
 			<template #prefix><fa :icon="faLock"/></template>
 		</mk-input>
diff --git a/src/client/pages/instance/announcements.vue b/src/client/pages/instance/announcements.vue
index 2d96c4e81c..5c9b492d5a 100644
--- a/src/client/pages/instance/announcements.vue
+++ b/src/client/pages/instance/announcements.vue
@@ -4,13 +4,13 @@
 	<mk-button @click="add()" primary style="margin: 0 auto 16px auto;"><fa :icon="faPlus"/> {{ $t('add') }}</mk-button>
 	<section class="_card announcements">
 		<div class="_content announcement" v-for="announcement in announcements">
-			<mk-input v-model="announcement.title">
+			<mk-input v-model:value="announcement.title">
 				<span>{{ $t('title') }}</span>
 			</mk-input>
-			<mk-textarea v-model="announcement.text">
+			<mk-textarea v-model:value="announcement.text">
 				<span>{{ $t('text') }}</span>
 			</mk-textarea>
-			<mk-input v-model="announcement.imageUrl">
+			<mk-input v-model:value="announcement.imageUrl">
 				<span>{{ $t('imageUrl') }}</span>
 			</mk-input>
 			<p v-if="announcement.reads">{{ $t('nUsersRead', { n: announcement.reads }) }}</p>
diff --git a/src/client/pages/instance/emojis.vue b/src/client/pages/instance/emojis.vue
index d687adc69e..e0754c8340 100644
--- a/src/client/pages/instance/emojis.vue
+++ b/src/client/pages/instance/emojis.vue
@@ -22,9 +22,9 @@
 			</mk-pagination>
 		</div>
 		<div class="_content" v-if="selected">
-			<mk-input v-model="name"><span>{{ $t('name') }}</span></mk-input>
-			<mk-input v-model="category" :datalist="categories"><span>{{ $t('category') }}</span></mk-input>
-			<mk-input v-model="aliases"><span>{{ $t('tags') }}</span></mk-input>
+			<mk-input v-model:value="name"><span>{{ $t('name') }}</span></mk-input>
+			<mk-input v-model:value="category" :datalist="categories"><span>{{ $t('category') }}</span></mk-input>
+			<mk-input v-model:value="aliases"><span>{{ $t('tags') }}</span></mk-input>
 			<mk-button inline primary @click="update"><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
 			<mk-button inline :disabled="selected == null" @click="del()"><fa :icon="faTrashAlt"/> {{ $t('delete') }}</mk-button>
 		</div>
@@ -35,7 +35,7 @@
 	<section class="_card _vMargin remote">
 		<div class="_title"><fa :icon="faLaugh"/> {{ $t('customEmojisOfRemote') }}</div>
 		<div class="_content">
-			<mk-input v-model="host" :debounce="true"><span>{{ $t('host') }}</span></mk-input>
+			<mk-input v-model:value="host" :debounce="true"><span>{{ $t('host') }}</span></mk-input>
 			<mk-pagination :pagination="remotePagination" class="emojis" ref="remoteEmojis">
 				<template #empty><span>{{ $t('noCustomEmojis') }}</span></template>
 				<template #default="{items}">
diff --git a/src/client/pages/instance/federation.vue b/src/client/pages/instance/federation.vue
index 2b6de14c87..15095b56f8 100644
--- a/src/client/pages/instance/federation.vue
+++ b/src/client/pages/instance/federation.vue
@@ -4,9 +4,9 @@
 
 	<section class="_card instances">
 		<div class="_content">
-			<mk-input v-model="host" :debounce="true"><span>{{ $t('host') }}</span></mk-input>
+			<mk-input v-model:value="host" :debounce="true"><span>{{ $t('host') }}</span></mk-input>
 			<div class="inputs" style="display: flex;">
-				<mk-select v-model="state" style="margin: 0; flex: 1;">
+				<mk-select v-model:value="state" style="margin: 0; flex: 1;">
 					<template #label>{{ $t('state') }}</template>
 					<option value="all">{{ $t('all') }}</option>
 					<option value="federating">{{ $t('federating') }}</option>
@@ -16,7 +16,7 @@
 					<option value="blocked">{{ $t('blocked') }}</option>
 					<option value="notResponding">{{ $t('notResponding') }}</option>
 				</mk-select>
-				<mk-select v-model="sort" style="margin: 0; flex: 1;">
+				<mk-select v-model:value="sort" style="margin: 0; flex: 1;">
 					<template #label>{{ $t('sort') }}</template>
 					<option value="+pubSub">{{ $t('pubSub') }} ({{ $t('descendingOrder') }})</option>
 					<option value="-pubSub">{{ $t('pubSub') }} ({{ $t('ascendingOrder') }})</option>
diff --git a/src/client/pages/instance/index.vue b/src/client/pages/instance/index.vue
index a4ebd1408d..2edcc3a484 100644
--- a/src/client/pages/instance/index.vue
+++ b/src/client/pages/instance/index.vue
@@ -150,10 +150,10 @@
 				<div class="_title"><fa :icon="faStream"/> {{ $t('serverLogs') }}</div>
 				<div class="_content">
 					<div class="_inputs">
-						<mk-input v-model="logDomain" :debounce="true">
+						<mk-input v-model:value="logDomain" :debounce="true">
 							<span>{{ $t('domain') }}</span>
 						</mk-input>
-						<mk-select v-model="logLevel">
+						<mk-select v-model:value="logLevel">
 							<template #label>{{ $t('level') }}</template>
 							<option value="all">{{ $t('levels.all') }}</option>
 							<option value="info">{{ $t('levels.info') }}</option>
diff --git a/src/client/pages/instance/instance.vue b/src/client/pages/instance/instance.vue
index 81312a0cf3..615a5f9442 100644
--- a/src/client/pages/instance/instance.vue
+++ b/src/client/pages/instance/instance.vue
@@ -72,7 +72,7 @@
 			<div class="header">
 				<span class="label">{{ $t('charts') }}</span>
 				<div class="selects">
-					<mk-select v-model="chartSrc" style="margin: 0; flex: 1;">
+					<mk-select v-model:value="chartSrc" style="margin: 0; flex: 1;">
 						<option value="requests">{{ $t('_instanceCharts.requests') }}</option>
 						<option value="users">{{ $t('_instanceCharts.users') }}</option>
 						<option value="users-total">{{ $t('_instanceCharts.usersTotal') }}</option>
@@ -85,7 +85,7 @@
 						<option value="drive-files">{{ $t('_instanceCharts.files') }}</option>
 						<option value="drive-files-total">{{ $t('_instanceCharts.filesTotal') }}</option>
 					</mk-select>
-					<mk-select v-model="chartSpan" style="margin: 0;">
+					<mk-select v-model:value="chartSpan" style="margin: 0;">
 						<option value="hour">{{ $t('perHour') }}</option>
 						<option value="day">{{ $t('perDay') }}</option>
 					</mk-select>
@@ -97,7 +97,7 @@
 		</div>
 		<div class="operations">
 			<span class="label">{{ $t('operations') }}</span>
-			<mk-switch v-model="isSuspended" class="switch">{{ $t('stopActivityDelivery') }}</mk-switch>
+			<mk-switch v-model:value="isSuspended" class="switch">{{ $t('stopActivityDelivery') }}</mk-switch>
 			<mk-switch :value="isBlocked" class="switch" @change="changeBlock">{{ $t('blockThisInstance') }}</mk-switch>
 			<details>
 				<summary>{{ $t('deleteAllFiles') }}</summary>
diff --git a/src/client/pages/instance/relays.vue b/src/client/pages/instance/relays.vue
index 2ee442b9f4..030ddedad0 100644
--- a/src/client/pages/instance/relays.vue
+++ b/src/client/pages/instance/relays.vue
@@ -5,7 +5,7 @@
 	<section class="_card _vMargin add">
 		<div class="_title"><fa :icon="faPlus"/> {{ $t('addRelay') }}</div>
 		<div class="_content">
-			<mk-input v-model="inbox">
+			<mk-input v-model:value="inbox">
 				<span>{{ $t('inboxUrl') }}</span>
 			</mk-input>
 			<mk-button @click="add(inbox)" primary><fa :icon="faPlus"/> {{ $t('add') }}</mk-button>
diff --git a/src/client/pages/instance/settings.vue b/src/client/pages/instance/settings.vue
index 2048cd0b22..1956ed9919 100644
--- a/src/client/pages/instance/settings.vue
+++ b/src/client/pages/instance/settings.vue
@@ -5,13 +5,13 @@
 	<section class="_card _vMargin info">
 		<div class="_title"><fa :icon="faInfoCircle"/> {{ $t('basicInfo') }}</div>
 		<div class="_content">
-			<mk-input v-model="name">{{ $t('instanceName') }}</mk-input>
-			<mk-textarea v-model="description">{{ $t('instanceDescription') }}</mk-textarea>
-			<mk-input v-model="iconUrl"><template #icon><fa :icon="faLink"/></template>{{ $t('iconUrl') }}</mk-input>
-			<mk-input v-model="bannerUrl"><template #icon><fa :icon="faLink"/></template>{{ $t('bannerUrl') }}</mk-input>
-			<mk-input v-model="tosUrl"><template #icon><fa :icon="faLink"/></template>{{ $t('tosUrl') }}</mk-input>
-			<mk-input v-model="maintainerName">{{ $t('maintainerName') }}</mk-input>
-			<mk-input v-model="maintainerEmail" type="email"><template #icon><fa :icon="faEnvelope"/></template>{{ $t('maintainerEmail') }}</mk-input>
+			<mk-input v-model:value="name">{{ $t('instanceName') }}</mk-input>
+			<mk-textarea v-model:value="description">{{ $t('instanceDescription') }}</mk-textarea>
+			<mk-input v-model:value="iconUrl"><template #icon><fa :icon="faLink"/></template>{{ $t('iconUrl') }}</mk-input>
+			<mk-input v-model:value="bannerUrl"><template #icon><fa :icon="faLink"/></template>{{ $t('bannerUrl') }}</mk-input>
+			<mk-input v-model:value="tosUrl"><template #icon><fa :icon="faLink"/></template>{{ $t('tosUrl') }}</mk-input>
+			<mk-input v-model:value="maintainerName">{{ $t('maintainerName') }}</mk-input>
+			<mk-input v-model:value="maintainerEmail" type="email"><template #icon><fa :icon="faEnvelope"/></template>{{ $t('maintainerEmail') }}</mk-input>
 		</div>
 		<div class="_footer">
 			<mk-button primary @click="save(true)"><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
@@ -20,22 +20,22 @@
 
 	<section class="_card _vMargin info">
 		<div class="_content">
-			<mk-input v-model="maxNoteTextLength" type="number" :save="() => save()" style="margin:0;"><template #icon><fa :icon="faPencilAlt"/></template>{{ $t('maxNoteTextLength') }}</mk-input>
+			<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="enableLocalTimeline" @change="save()">{{ $t('enableLocalTimeline') }}</mk-switch>
-			<mk-switch v-model="enableGlobalTimeline" @change="save()">{{ $t('enableGlobalTimeline') }}</mk-switch>
+			<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-info>{{ $t('disablingTimelinesInfo') }}</mk-info>
 		</div>
 		<div class="_content">
-			<mk-switch v-model="useStarForReactionFallback" @change="save()">{{ $t('useStarForReactionFallback') }}</mk-switch>
+			<mk-switch v-model:value="useStarForReactionFallback" @change="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="enableRegistration" @change="save()">{{ $t('enableRegistration') }}</mk-switch>
+			<mk-switch v-model:value="enableRegistration" @change="save()">{{ $t('enableRegistration') }}</mk-switch>
 			<mk-button v-if="!enableRegistration" @click="invite">{{ $t('invite') }}</mk-button>
 		</div>
 	</section>
@@ -43,10 +43,10 @@
 	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faShieldAlt"/> {{ $t('hcaptcha') }}</div>
 		<div class="_content">
-			<mk-switch v-model="enableHcaptcha" ref="enableHcaptcha">{{ $t('enableHcaptcha') }}</mk-switch>
+			<mk-switch v-model:value="enableHcaptcha" ref="enableHcaptcha">{{ $t('enableHcaptcha') }}</mk-switch>
 			<template v-if="enableHcaptcha">
-				<mk-input v-model="hcaptchaSiteKey" :disabled="!enableHcaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('hcaptchaSiteKey') }}</mk-input>
-				<mk-input v-model="hcaptchaSecretKey" :disabled="!enableHcaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('hcaptchaSecretKey') }}</mk-input>
+				<mk-input v-model:value="hcaptchaSiteKey" :disabled="!enableHcaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('hcaptchaSiteKey') }}</mk-input>
+				<mk-input v-model:value="hcaptchaSecretKey" :disabled="!enableHcaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('hcaptchaSecretKey') }}</mk-input>
 			</template>
 		</div>
 		<div class="_content" v-if="enableHcaptcha">
@@ -61,10 +61,10 @@
 	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faShieldAlt"/> {{ $t('recaptcha') }}</div>
 		<div class="_content">
-			<mk-switch v-model="enableRecaptcha" ref="enableRecaptcha">{{ $t('enableRecaptcha') }}</mk-switch>
+			<mk-switch v-model:value="enableRecaptcha" ref="enableRecaptcha">{{ $t('enableRecaptcha') }}</mk-switch>
 			<template v-if="enableRecaptcha">
-				<mk-input v-model="recaptchaSiteKey" :disabled="!enableRecaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('recaptchaSiteKey') }}</mk-input>
-				<mk-input v-model="recaptchaSecretKey" :disabled="!enableRecaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('recaptchaSecretKey') }}</mk-input>
+				<mk-input v-model:value="recaptchaSiteKey" :disabled="!enableRecaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('recaptchaSiteKey') }}</mk-input>
+				<mk-input v-model:value="recaptchaSecretKey" :disabled="!enableRecaptcha"><template #icon><fa :icon="faKey"/></template>{{ $t('recaptchaSecretKey') }}</mk-input>
 			</template>
 		</div>
 		<div class="_content" v-if="enableRecaptcha && recaptchaSiteKey">
@@ -79,19 +79,19 @@
 	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faEnvelope" /> {{ $t('emailConfig') }}</div>
 		<div class="_content">
-			<mk-switch v-model="enableEmail" @change="save()">{{ $t('enableEmail') }}<template #desc>{{ $t('emailConfigInfo') }}</template></mk-switch>
-			<mk-input v-model="email" type="email" :disabled="!enableEmail">{{ $t('email') }}</mk-input>
+			<mk-switch v-model:value="enableEmail" @change="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">
-				<mk-input v-model="smtpHost" :disabled="!enableEmail">{{ $t('smtpHost') }}</mk-input>
-				<mk-input v-model="smtpPort" type="number" :disabled="!enableEmail">{{ $t('smtpPort') }}</mk-input>
+				<mk-input v-model:value="smtpHost" :disabled="!enableEmail">{{ $t('smtpHost') }}</mk-input>
+				<mk-input v-model:value="smtpPort" type="number" :disabled="!enableEmail">{{ $t('smtpPort') }}</mk-input>
 			</div>
 			<div class="_inputs">
-				<mk-input v-model="smtpUser" :disabled="!enableEmail">{{ $t('smtpUser') }}</mk-input>
-				<mk-input v-model="smtpPass" type="password" :disabled="!enableEmail">{{ $t('smtpPass') }}</mk-input>
+				<mk-input v-model:value="smtpUser" :disabled="!enableEmail">{{ $t('smtpUser') }}</mk-input>
+				<mk-input v-model:value="smtpPass" type="password" :disabled="!enableEmail">{{ $t('smtpPass') }}</mk-input>
 			</div>
 			<mk-info>{{ $t('emptyToDisableSmtpAuth') }}</mk-info>
-			<mk-switch v-model="smtpSecure" :disabled="!enableEmail">{{ $t('smtpSecure') }}<template #desc>{{ $t('smtpSecureInfo') }}</template></mk-switch>
+			<mk-switch v-model:value="smtpSecure" :disabled="!enableEmail">{{ $t('smtpSecure') }}<template #desc>{{ $t('smtpSecureInfo') }}</template></mk-switch>
 			<div>
 				<mk-button :disabled="!enableEmail" inline @click="testEmail()">{{ $t('testEmail') }}</mk-button>
 				<mk-button :disabled="!enableEmail" primary inline @click="save(true)"><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
@@ -102,11 +102,11 @@
 	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faBolt"/> {{ $t('serviceworker') }}</div>
 		<div class="_content">
-			<mk-switch v-model="enableServiceWorker">{{ $t('enableServiceworker') }}<template #desc>{{ $t('serviceworkerInfo') }}</template></mk-switch>
+			<mk-switch v-model:value="enableServiceWorker">{{ $t('enableServiceworker') }}<template #desc>{{ $t('serviceworkerInfo') }}</template></mk-switch>
 			<template v-if="enableServiceWorker">
 				<div class="_inputs">
-					<mk-input v-model="swPublicKey" :disabled="!enableServiceWorker"><template #icon><fa :icon="faKey"/></template>Public key</mk-input>
-					<mk-input v-model="swPrivateKey" :disabled="!enableServiceWorker"><template #icon><fa :icon="faKey"/></template>Private key</mk-input>
+					<mk-input v-model:value="swPublicKey" :disabled="!enableServiceWorker"><template #icon><fa :icon="faKey"/></template>Public key</mk-input>
+					<mk-input v-model:value="swPrivateKey" :disabled="!enableServiceWorker"><template #icon><fa :icon="faKey"/></template>Private key</mk-input>
 				</div>
 			</template>
 		</div>
@@ -118,7 +118,7 @@
 	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faThumbtack"/> {{ $t('pinnedUsers') }}</div>
 		<div class="_content">
-			<mk-textarea v-model="pinnedUsers">
+			<mk-textarea v-model:value="pinnedUsers">
 				<template #desc>{{ $t('pinnedUsersDescription') }} <button class="_textButton" @click="addPinUser">{{ $t('addUser') }}</button></template>
 			</mk-textarea>
 		</div>
@@ -130,10 +130,10 @@
 	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faCloud"/> {{ $t('files') }}</div>
 		<div class="_content">
-			<mk-switch v-model="cacheRemoteFiles">{{ $t('cacheRemoteFiles') }}<template #desc>{{ $t('cacheRemoteFilesDescription') }}</template></mk-switch>
-			<mk-switch v-model="proxyRemoteFiles">{{ $t('proxyRemoteFiles') }}<template #desc>{{ $t('proxyRemoteFilesDescription') }}</template></mk-switch>
-			<mk-input v-model="localDriveCapacityMb" type="number">{{ $t('driveCapacityPerLocalAccount') }}<template #suffix>MB</template><template #desc>{{ $t('inMb') }}</template></mk-input>
-			<mk-input v-model="remoteDriveCapacityMb" type="number" :disabled="!cacheRemoteFiles" style="margin-bottom: 0;">{{ $t('driveCapacityPerRemoteAccount') }}<template #suffix>MB</template><template #desc>{{ $t('inMb') }}</template></mk-input>
+			<mk-switch v-model:value="cacheRemoteFiles">{{ $t('cacheRemoteFiles') }}<template #desc>{{ $t('cacheRemoteFilesDescription') }}</template></mk-switch>
+			<mk-switch v-model:value="proxyRemoteFiles">{{ $t('proxyRemoteFiles') }}<template #desc>{{ $t('proxyRemoteFilesDescription') }}</template></mk-switch>
+			<mk-input v-model:value="localDriveCapacityMb" type="number">{{ $t('driveCapacityPerLocalAccount') }}<template #suffix>MB</template><template #desc>{{ $t('inMb') }}</template></mk-input>
+			<mk-input v-model:value="remoteDriveCapacityMb" type="number" :disabled="!cacheRemoteFiles" style="margin-bottom: 0;">{{ $t('driveCapacityPerRemoteAccount') }}<template #suffix>MB</template><template #desc>{{ $t('inMb') }}</template></mk-input>
 		</div>
 		<div class="_footer">
 			<mk-button primary @click="save(true)"><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
@@ -143,24 +143,24 @@
 	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faCloud"/> {{ $t('objectStorage') }}</div>
 		<div class="_content">
-			<mk-switch v-model="useObjectStorage">{{ $t('useObjectStorage') }}</mk-switch>
+			<mk-switch v-model:value="useObjectStorage">{{ $t('useObjectStorage') }}</mk-switch>
 			<template v-if="useObjectStorage">
-				<mk-input v-model="objectStorageBaseUrl" :disabled="!useObjectStorage">{{ $t('objectStorageBaseUrl') }}<template #desc>{{ $t('objectStorageBaseUrlDesc') }}</template></mk-input>
+				<mk-input v-model:value="objectStorageBaseUrl" :disabled="!useObjectStorage">{{ $t('objectStorageBaseUrl') }}<template #desc>{{ $t('objectStorageBaseUrlDesc') }}</template></mk-input>
 				<div class="_inputs">
-					<mk-input v-model="objectStorageBucket" :disabled="!useObjectStorage">{{ $t('objectStorageBucket') }}<template #desc>{{ $t('objectStorageBucketDesc') }}</template></mk-input>
-					<mk-input v-model="objectStoragePrefix" :disabled="!useObjectStorage">{{ $t('objectStoragePrefix') }}<template #desc>{{ $t('objectStoragePrefixDesc') }}</template></mk-input>
+					<mk-input v-model:value="objectStorageBucket" :disabled="!useObjectStorage">{{ $t('objectStorageBucket') }}<template #desc>{{ $t('objectStorageBucketDesc') }}</template></mk-input>
+					<mk-input v-model:value="objectStoragePrefix" :disabled="!useObjectStorage">{{ $t('objectStoragePrefix') }}<template #desc>{{ $t('objectStoragePrefixDesc') }}</template></mk-input>
 				</div>
-				<mk-input v-model="objectStorageEndpoint" :disabled="!useObjectStorage">{{ $t('objectStorageEndpoint') }}<template #desc>{{ $t('objectStorageEndpointDesc') }}</template></mk-input>
+				<mk-input v-model:value="objectStorageEndpoint" :disabled="!useObjectStorage">{{ $t('objectStorageEndpoint') }}<template #desc>{{ $t('objectStorageEndpointDesc') }}</template></mk-input>
 				<div class="_inputs">
-					<mk-input v-model="objectStorageRegion" :disabled="!useObjectStorage">{{ $t('objectStorageRegion') }}<template #desc>{{ $t('objectStorageRegionDesc') }}</template></mk-input>
+					<mk-input v-model:value="objectStorageRegion" :disabled="!useObjectStorage">{{ $t('objectStorageRegion') }}<template #desc>{{ $t('objectStorageRegionDesc') }}</template></mk-input>
 				</div>
 				<div class="_inputs">
-					<mk-input v-model="objectStorageAccessKey" :disabled="!useObjectStorage"><template #icon><fa :icon="faKey"/></template>Access key</mk-input>
-					<mk-input v-model="objectStorageSecretKey" :disabled="!useObjectStorage"><template #icon><fa :icon="faKey"/></template>Secret key</mk-input>
+					<mk-input v-model:value="objectStorageAccessKey" :disabled="!useObjectStorage"><template #icon><fa :icon="faKey"/></template>Access key</mk-input>
+					<mk-input v-model:value="objectStorageSecretKey" :disabled="!useObjectStorage"><template #icon><fa :icon="faKey"/></template>Secret key</mk-input>
 				</div>
-				<mk-switch v-model="objectStorageUseSSL" :disabled="!useObjectStorage">{{ $t('objectStorageUseSSL') }}<template #desc>{{ $t('objectStorageUseSSLDesc') }}</template></mk-switch>
-				<mk-switch v-model="objectStorageUseProxy" :disabled="!useObjectStorage">{{ $t('objectStorageUseProxy') }}<template #desc>{{ $t('objectStorageUseProxyDesc') }}</template></mk-switch>
-				<mk-switch v-model="objectStorageSetPublicRead" :disabled="!useObjectStorage">{{ $t('objectStorageSetPublicRead') }}</mk-switch>
+				<mk-switch v-model:value="objectStorageUseSSL" :disabled="!useObjectStorage">{{ $t('objectStorageUseSSL') }}<template #desc>{{ $t('objectStorageUseSSLDesc') }}</template></mk-switch>
+				<mk-switch v-model:value="objectStorageUseProxy" :disabled="!useObjectStorage">{{ $t('objectStorageUseProxy') }}<template #desc>{{ $t('objectStorageUseProxyDesc') }}</template></mk-switch>
+				<mk-switch v-model:value="objectStorageSetPublicRead" :disabled="!useObjectStorage">{{ $t('objectStorageSetPublicRead') }}</mk-switch>
 			</template>
 		</div>
 		<div class="_footer">
@@ -179,7 +179,7 @@
 	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faBan"/> {{ $t('blockedInstances') }}</div>
 		<div class="_content">
-			<mk-textarea v-model="blockedHosts">
+			<mk-textarea v-model:value="blockedHosts">
 				<template #desc>{{ $t('blockedInstancesDescription') }}</template>
 			</mk-textarea>
 		</div>
@@ -192,29 +192,29 @@
 		<div class="_title"><fa :icon="faShareAlt"/> {{ $t('integration') }}</div>
 		<div class="_content">
 			<header><fa :icon="faTwitter"/> Twitter</header>
-			<mk-switch v-model="enableTwitterIntegration">{{ $t('enable') }}</mk-switch>
+			<mk-switch v-model:value="enableTwitterIntegration">{{ $t('enable') }}</mk-switch>
 			<template v-if="enableTwitterIntegration">
 				<mk-info>Callback URL: {{ `${url}/api/tw/cb` }}</mk-info>
-				<mk-input v-model="twitterConsumerKey" :disabled="!enableTwitterIntegration"><template #icon><fa :icon="faKey"/></template>Consumer Key</mk-input>
-				<mk-input v-model="twitterConsumerSecret" :disabled="!enableTwitterIntegration"><template #icon><fa :icon="faKey"/></template>Consumer Secret</mk-input>
+				<mk-input v-model:value="twitterConsumerKey" :disabled="!enableTwitterIntegration"><template #icon><fa :icon="faKey"/></template>Consumer Key</mk-input>
+				<mk-input v-model:value="twitterConsumerSecret" :disabled="!enableTwitterIntegration"><template #icon><fa :icon="faKey"/></template>Consumer Secret</mk-input>
 			</template>
 		</div>
 		<div class="_content">
 			<header><fa :icon="faGithub"/> GitHub</header>
-			<mk-switch v-model="enableGithubIntegration">{{ $t('enable') }}</mk-switch>
+			<mk-switch v-model:value="enableGithubIntegration">{{ $t('enable') }}</mk-switch>
 			<template v-if="enableGithubIntegration">
 				<mk-info>Callback URL: {{ `${url}/api/gh/cb` }}</mk-info>
-				<mk-input v-model="githubClientId" :disabled="!enableGithubIntegration"><template #icon><fa :icon="faKey"/></template>Client ID</mk-input>
-				<mk-input v-model="githubClientSecret" :disabled="!enableGithubIntegration"><template #icon><fa :icon="faKey"/></template>Client Secret</mk-input>
+				<mk-input v-model:value="githubClientId" :disabled="!enableGithubIntegration"><template #icon><fa :icon="faKey"/></template>Client ID</mk-input>
+				<mk-input v-model:value="githubClientSecret" :disabled="!enableGithubIntegration"><template #icon><fa :icon="faKey"/></template>Client Secret</mk-input>
 			</template>
 		</div>
 		<div class="_content">
 			<header><fa :icon="faDiscord"/> Discord</header>
-			<mk-switch v-model="enableDiscordIntegration">{{ $t('enable') }}</mk-switch>
+			<mk-switch v-model:value="enableDiscordIntegration">{{ $t('enable') }}</mk-switch>
 			<template v-if="enableDiscordIntegration">
 				<mk-info>Callback URL: {{ `${url}/api/dc/cb` }}</mk-info>
-				<mk-input v-model="discordClientId" :disabled="!enableDiscordIntegration"><template #icon><fa :icon="faKey"/></template>Client ID</mk-input>
-				<mk-input v-model="discordClientSecret" :disabled="!enableDiscordIntegration"><template #icon><fa :icon="faKey"/></template>Client Secret</mk-input>
+				<mk-input v-model:value="discordClientId" :disabled="!enableDiscordIntegration"><template #icon><fa :icon="faKey"/></template>Client ID</mk-input>
+				<mk-input v-model:value="discordClientSecret" :disabled="!enableDiscordIntegration"><template #icon><fa :icon="faKey"/></template>Client Secret</mk-input>
 			</template>
 		</div>
 		<div class="_footer">
@@ -225,7 +225,7 @@
 	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faArchway" /> Summaly Proxy</div>
 		<div class="_content">
-			<mk-input v-model="summalyProxy">URL</mk-input>
+			<mk-input v-model:value="summalyProxy">URL</mk-input>
 			<mk-button primary @click="save(true)"><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
 		</div>
 	</section>
diff --git a/src/client/pages/instance/users.user.vue b/src/client/pages/instance/users.user.vue
index 219ba65178..14c676b4f6 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="moderator">{{ $t('moderator') }}</mk-switch>
-				<mk-switch @change="toggleSilence()" v-model="silenced">{{ $t('silence') }}</mk-switch>
-				<mk-switch @change="toggleSuspend()" v-model="suspended">{{ $t('suspend') }}</mk-switch>
+				<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>
 			</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/instance/users.vue b/src/client/pages/instance/users.vue
index c50c8070a8..7f5665655d 100644
--- a/src/client/pages/instance/users.vue
+++ b/src/client/pages/instance/users.vue
@@ -5,7 +5,7 @@
 	<section class="_card _vMargin lookup">
 		<div class="_title"><fa :icon="faSearch"/> {{ $t('lookup') }}</div>
 		<div class="_content">
-			<mk-input class="target" v-model="target" type="text" @enter="showUser()">
+			<mk-input class="target" v-model:value="target" type="text" @enter="showUser()">
 				<span>{{ $t('usernameOrUserId') }}</span>
 			</mk-input>
 			<mk-button @click="showUser()" primary><fa :icon="faSearch"/> {{ $t('lookup') }}</mk-button>
@@ -19,14 +19,14 @@
 		<div class="_title"><fa :icon="faUsers"/> {{ $t('users') }}</div>
 		<div class="_content">
 			<div class="inputs" style="display: flex;">
-				<mk-select v-model="sort" style="margin: 0; flex: 1;">
+				<mk-select v-model:value="sort" style="margin: 0; flex: 1;">
 					<template #label>{{ $t('sort') }}</template>
 					<option value="-createdAt">{{ $t('registeredDate') }} ({{ $t('ascendingOrder') }})</option>
 					<option value="+createdAt">{{ $t('registeredDate') }} ({{ $t('descendingOrder') }})</option>
 					<option value="-updatedAt">{{ $t('lastUsed') }} ({{ $t('ascendingOrder') }})</option>
 					<option value="+updatedAt">{{ $t('lastUsed') }} ({{ $t('descendingOrder') }})</option>
 				</mk-select>
-				<mk-select v-model="state" style="margin: 0; flex: 1;">
+				<mk-select v-model:value="state" style="margin: 0; flex: 1;">
 					<template #label>{{ $t('state') }}</template>
 					<option value="all">{{ $t('all') }}</option>
 					<option value="available">{{ $t('normal') }}</option>
@@ -35,7 +35,7 @@
 					<option value="silenced">{{ $t('silence') }}</option>
 					<option value="suspended">{{ $t('suspend') }}</option>
 				</mk-select>
-				<mk-select v-model="origin" style="margin: 0; flex: 1;">
+				<mk-select v-model:value="origin" style="margin: 0; flex: 1;">
 					<template #label>{{ $t('instance') }}</template>
 					<option value="combined">{{ $t('all') }}</option>
 					<option value="local">{{ $t('local') }}</option>
@@ -43,10 +43,10 @@
 				</mk-select>
 			</div>
 			<div class="inputs" style="display: flex; padding-top: 1.2em;">
-				<mk-input v-model="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @input="$refs.users.reload()">
+				<mk-input v-model:value="searchUsername" style="margin: 0; flex: 1;" type="text" spellcheck="false" @onUpdate:value="$refs.users.reload()">
 					<span>{{ $t('username') }}</span>
 				</mk-input>
-				<mk-input v-model="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @input="$refs.users.reload()" :disabled="pagination.params().origin === 'local'">
+				<mk-input v-model:value="searchHost" style="margin: 0; flex: 1;" type="text" spellcheck="false" @onUpdate:value="$refs.users.reload()" :disabled="pagination.params().origin === 'local'">
 					<span>{{ $t('host') }}</span>
 				</mk-input>
 			</div>
diff --git a/src/client/pages/my-antennas/index.antenna.vue b/src/client/pages/my-antennas/index.antenna.vue
index c5582f2b62..bfff685709 100644
--- a/src/client/pages/my-antennas/index.antenna.vue
+++ b/src/client/pages/my-antennas/index.antenna.vue
@@ -2,10 +2,10 @@
 <div class="shaynizk _card">
 	<div class="_title" v-if="antenna.name">{{ antenna.name }}</div>
 	<div class="_content body">
-		<mk-input v-model="name">
+		<mk-input v-model:value="name">
 			<span>{{ $t('name') }}</span>
 		</mk-input>
-		<mk-select v-model="src">
+		<mk-select v-model:value="src">
 			<template #label>{{ $t('antennaSource') }}</template>
 			<option value="all">{{ $t('_antennaSources.all') }}</option>
 			<option value="home">{{ $t('_antennaSources.homeTimeline') }}</option>
@@ -13,30 +13,30 @@
 			<option value="list">{{ $t('_antennaSources.userList') }}</option>
 			<option value="group">{{ $t('_antennaSources.userGroup') }}</option>
 		</mk-select>
-		<mk-select v-model="userListId" v-if="src === 'list'">
+		<mk-select v-model:value="userListId" v-if="src === 'list'">
 			<template #label>{{ $t('userList') }}</template>
 			<option v-for="list in userLists" :value="list.id" :key="list.id">{{ list.name }}</option>
 		</mk-select>
-		<mk-select v-model="userGroupId" v-else-if="src === 'group'">
+		<mk-select v-model:value="userGroupId" v-else-if="src === 'group'">
 			<template #label>{{ $t('userGroup') }}</template>
 			<option v-for="group in userGroups" :value="group.id" :key="group.id">{{ group.name }}</option>
 		</mk-select>
-		<mk-textarea v-model="users" v-else-if="src === 'users'">
+		<mk-textarea v-model:value="users" v-else-if="src === 'users'">
 			<span>{{ $t('users') }}</span>
 			<template #desc>{{ $t('antennaUsersDescription') }} <button class="_textButton" @click="addUser">{{ $t('addUser') }}</button></template>
 		</mk-textarea>
-		<mk-switch v-model="withReplies">{{ $t('withReplies') }}</mk-switch>
-		<mk-textarea v-model="keywords">
+		<mk-switch v-model:value="withReplies">{{ $t('withReplies') }}</mk-switch>
+		<mk-textarea v-model:value="keywords">
 			<span>{{ $t('antennaKeywords') }}</span>
 			<template #desc>{{ $t('antennaKeywordsDescription') }}</template>
 		</mk-textarea>
-		<mk-textarea v-model="excludeKeywords">
+		<mk-textarea v-model:value="excludeKeywords">
 			<span>{{ $t('antennaExcludeKeywords') }}</span>
 			<template #desc>{{ $t('antennaKeywordsDescription') }}</template>
 		</mk-textarea>
-		<mk-switch v-model="caseSensitive">{{ $t('caseSensitive') }}</mk-switch>
-		<mk-switch v-model="withFile">{{ $t('withFileAntenna') }}</mk-switch>
-		<mk-switch v-model="notify">{{ $t('notifyAntenna') }}</mk-switch>
+		<mk-switch v-model:value="caseSensitive">{{ $t('caseSensitive') }}</mk-switch>
+		<mk-switch v-model:value="withFile">{{ $t('withFileAntenna') }}</mk-switch>
+		<mk-switch v-model:value="notify">{{ $t('notifyAntenna') }}</mk-switch>
 	</div>
 	<div class="_footer">
 		<mk-button inline @click="saveAntenna()" primary><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
diff --git a/src/client/pages/my-settings/2fa.vue b/src/client/pages/my-settings/2fa.vue
index 600bccfa45..e2eca7e305 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="usePasswordLessLogin" @change="updatePasswordLessLogin" v-if="$store.state.i.securityKeysList.length > 0">{{ $t('passwordLessLogin') }}</mk-switch>
+				<mk-switch v-model:value="usePasswordLessLogin" @change="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>
@@ -32,7 +32,7 @@
 					</li>
 					<li v-if="registration.stage >= 1">
 						<mk-form :disabled="registration.stage != 1 || registration.saving">
-							<mk-input v-model="keyName" :max="30">
+							<mk-input v-model:value="keyName" :max="30">
 								<span>{{ $t('securityKeyName') }}</span>
 							</mk-input>
 							<mk-button @click="registerKey" :disabled="keyName.length == 0">{{ $t('registerSecurityKey') }}</mk-button>
@@ -52,7 +52,7 @@
 				</li>
 				<li>{{ $t('_2fa.step2') }}<br><img :src="data.qr"></li>
 				<li>{{ $t('_2fa.step3') }}<br>
-					<mk-input v-model="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false">{{ $t('token') }}</mk-input>
+					<mk-input v-model:value="token" type="text" pattern="^[0-9]{6}$" autocomplete="off" spellcheck="false">{{ $t('token') }}</mk-input>
 					<mk-button primary @click="submit">{{ $t('done') }}</mk-button>
 				</li>
 			</ol>
diff --git a/src/client/pages/my-settings/import-export.vue b/src/client/pages/my-settings/import-export.vue
index b2a1428cbe..25be6a0b40 100644
--- a/src/client/pages/my-settings/import-export.vue
+++ b/src/client/pages/my-settings/import-export.vue
@@ -2,7 +2,7 @@
 <section class="_card">
 	<div class="_title"><fa :icon="faBoxes"/> {{ $t('importAndExport') }}</div>
 	<div class="_content">
-		<mk-select v-model="exportTarget">
+		<mk-select v-model:value="exportTarget">
 			<option value="notes">{{ $t('_exportOrImport.allNotes') }}</option>
 			<option value="following">{{ $t('_exportOrImport.followingList') }}</option>
 			<option value="user-lists">{{ $t('_exportOrImport.userLists') }}</option>
diff --git a/src/client/pages/my-settings/index.vue b/src/client/pages/my-settings/index.vue
index f70d2e038e..6b1ef84d2d 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="$store.state.i.autoWatch" @change="onChangeAutoWatch">
+			<mk-switch v-model:value="$store.state.i.autoWatch" @change="onChangeAutoWatch">
 				{{ $t('autoNoteWatch') }}<template #desc>{{ $t('autoNoteWatchDescription') }}</template>
 			</mk-switch>
-			<mk-switch v-model="$store.state.i.injectFeaturedNote" @change="onChangeInjectFeaturedNote">
+			<mk-switch v-model:value="$store.state.i.injectFeaturedNote" @change="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 d9cc601b44..a4553938d9 100644
--- a/src/client/pages/my-settings/privacy.vue
+++ b/src/client/pages/my-settings/privacy.vue
@@ -2,19 +2,19 @@
 <section class="_card">
 	<div class="_title"><fa :icon="faLock"/> {{ $t('privacy') }}</div>
 	<div class="_content">
-		<mk-switch v-model="isLocked" @change="save()">{{ $t('makeFollowManuallyApprove') }}</mk-switch>
-		<mk-switch v-model="autoAcceptFollowed" v-if="isLocked" @change="save()">{{ $t('autoAcceptFollowed') }}</mk-switch>
+		<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>
 	</div>
 	<div class="_content">
-		<mk-switch v-model="rememberNoteVisibility" @change="save()">{{ $t('rememberNoteVisibility') }}</mk-switch>
-		<mk-select v-model="defaultNoteVisibility" style="margin-bottom: 8px;" v-if="!rememberNoteVisibility">
+		<mk-switch v-model:value="rememberNoteVisibility" @change="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>
 			<option value="home">{{ $t('_visibility.home') }}</option>
 			<option value="followers">{{ $t('_visibility.followers') }}</option>
 			<option value="specified">{{ $t('_visibility.specified') }}</option>
 		</mk-select>
-		<mk-switch v-model="defaultNoteLocalOnly" v-if="!rememberNoteVisibility">{{ $t('_visibility.localOnly') }}</mk-switch>
+		<mk-switch v-model:value="defaultNoteLocalOnly" v-if="!rememberNoteVisibility">{{ $t('_visibility.localOnly') }}</mk-switch>
 	</div>
 </section>
 </template>
diff --git a/src/client/pages/my-settings/profile.vue b/src/client/pages/my-settings/profile.vue
index c31f4ab3f6..e6d140b772 100644
--- a/src/client/pages/my-settings/profile.vue
+++ b/src/client/pages/my-settings/profile.vue
@@ -6,21 +6,21 @@
 			<mk-avatar class="avatar" :user="$store.state.i" :disable-preview="true" :disable-link="true" @click.stop="changeAvatar"/>
 		</div>
 	
-		<mk-input v-model="name" :max="30">
+		<mk-input v-model:value="name" :max="30">
 			<span>{{ $t('_profile.name') }}</span>
 		</mk-input>
 
-		<mk-textarea v-model="description" :max="500">
+		<mk-textarea v-model:value="description" :max="500">
 			<span>{{ $t('_profile.description') }}</span>
 			<template #desc>{{ $t('_profile.youCanIncludeHashtags') }}</template>
 		</mk-textarea>
 
-		<mk-input v-model="location">
+		<mk-input v-model:value="location">
 			<span>{{ $t('location') }}</span>
 			<template #prefix><fa :icon="faMapMarkerAlt"/></template>
 		</mk-input>
 
-		<mk-input v-model="birthday" type="date">
+		<mk-input v-model:value="birthday" type="date">
 			<template #title>{{ $t('birthday') }}</template>
 			<template #prefix><fa :icon="faBirthdayCake"/></template>
 		</mk-input>
@@ -28,25 +28,25 @@
 		<details class="fields">
 			<summary>{{ $t('_profile.metadata') }}</summary>
 			<div class="row">
-				<mk-input v-model="fieldName0">{{ $t('_profile.metadataLabel') }}</mk-input>
-				<mk-input v-model="fieldValue0">{{ $t('_profile.metadataContent') }}</mk-input>
+				<mk-input v-model:value="fieldName0">{{ $t('_profile.metadataLabel') }}</mk-input>
+				<mk-input v-model:value="fieldValue0">{{ $t('_profile.metadataContent') }}</mk-input>
 			</div>
 			<div class="row">
-				<mk-input v-model="fieldName1">{{ $t('_profile.metadataLabel') }}</mk-input>
-				<mk-input v-model="fieldValue1">{{ $t('_profile.metadataContent') }}</mk-input>
+				<mk-input v-model:value="fieldName1">{{ $t('_profile.metadataLabel') }}</mk-input>
+				<mk-input v-model:value="fieldValue1">{{ $t('_profile.metadataContent') }}</mk-input>
 			</div>
 			<div class="row">
-				<mk-input v-model="fieldName2">{{ $t('_profile.metadataLabel') }}</mk-input>
-				<mk-input v-model="fieldValue2">{{ $t('_profile.metadataContent') }}</mk-input>
+				<mk-input v-model:value="fieldName2">{{ $t('_profile.metadataLabel') }}</mk-input>
+				<mk-input v-model:value="fieldValue2">{{ $t('_profile.metadataContent') }}</mk-input>
 			</div>
 			<div class="row">
-				<mk-input v-model="fieldName3">{{ $t('_profile.metadataLabel') }}</mk-input>
-				<mk-input v-model="fieldValue3">{{ $t('_profile.metadataContent') }}</mk-input>
+				<mk-input v-model:value="fieldName3">{{ $t('_profile.metadataLabel') }}</mk-input>
+				<mk-input v-model:value="fieldValue3">{{ $t('_profile.metadataContent') }}</mk-input>
 			</div>
 		</details>
 
-		<mk-switch v-model="isBot">{{ $t('flagAsBot') }}</mk-switch>
-		<mk-switch v-model="isCat">{{ $t('flagAsCat') }}</mk-switch>
+		<mk-switch v-model:value="isBot">{{ $t('flagAsBot') }}</mk-switch>
+		<mk-switch v-model:value="isCat">{{ $t('flagAsCat') }}</mk-switch>
 	</div>
 	<div class="_footer">
 		<mk-button @click="save(true)" primary><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
diff --git a/src/client/pages/my-settings/reaction.vue b/src/client/pages/my-settings/reaction.vue
index 9474e865f1..a2ca4f0b1d 100644
--- a/src/client/pages/my-settings/reaction.vue
+++ b/src/client/pages/my-settings/reaction.vue
@@ -2,7 +2,7 @@
 <section class="_card">
 	<div class="_title"><fa :icon="faLaugh"/> {{ $t('reaction') }}</div>
 	<div class="_content">
-		<mk-input v-model="reactions" style="font-family: 'Segoe UI Emoji', 'Noto Color Emoji', Roboto, HelveticaNeue, Arial, sans-serif">
+		<mk-input v-model:value="reactions" style="font-family: 'Segoe UI Emoji', 'Noto Color Emoji', Roboto, HelveticaNeue, Arial, sans-serif">
 			{{ $t('reaction') }}<template #desc>{{ $t('reactionSettingDescription') }} <button class="_textButton" @click="chooseEmoji">{{ $t('chooseEmoji') }}</button></template>
 		</mk-input>
 		<mk-button inline @click="setDefault"><fa :icon="faUndo"/> {{ $t('default') }}</mk-button>
diff --git a/src/client/pages/my-settings/word-mute.vue b/src/client/pages/my-settings/word-mute.vue
index b8eb2ce4c4..4dd7d5c801 100644
--- a/src/client/pages/my-settings/word-mute.vue
+++ b/src/client/pages/my-settings/word-mute.vue
@@ -2,18 +2,18 @@
 <section class="_card">
 	<div class="_title"><fa :icon="faCommentSlash"/> {{ $t('wordMute') }}</div>
 	<div class="_content _noPad">
-		<mk-tab v-model="tab" :items="[{ label: $t('_wordMute.soft'), value: 'soft' }, { label: $t('_wordMute.hard'), value: 'hard' }]"/>
+		<mk-tab v-model:value="tab" :items="[{ label: $t('_wordMute.soft'), value: 'soft' }, { label: $t('_wordMute.hard'), value: 'hard' }]"/>
 	</div>
 	<div class="_content" v-show="tab === 'soft'">
 		<mk-info>{{ $t('_wordMute.softDescription') }}</mk-info>
-		<mk-textarea v-model="softMutedWords">
+		<mk-textarea v-model:value="softMutedWords">
 			<span>{{ $t('_wordMute.muteWords') }}</span>
 			<template #desc>{{ $t('_wordMute.muteWordsDescription') }}<br>{{ $t('_wordMute.muteWordsDescription2') }}</template>
 		</mk-textarea>
 	</div>
 	<div class="_content" v-show="tab === 'hard'">
 		<mk-info>{{ $t('_wordMute.hardDescription') }}</mk-info>
-		<mk-textarea v-model="hardMutedWords" style="margin-bottom: 16px;">
+		<mk-textarea v-model:value="hardMutedWords" style="margin-bottom: 16px;">
 			<span>{{ $t('_wordMute.muteWords') }}</span>
 			<template #desc>{{ $t('_wordMute.muteWordsDescription') }}<br>{{ $t('_wordMute.muteWordsDescription2') }}</template>
 		</mk-textarea>
diff --git a/src/client/pages/note.vue b/src/client/pages/note.vue
index 67ac986a37..ee499f30cd 100644
--- a/src/client/pages/note.vue
+++ b/src/client/pages/note.vue
@@ -14,7 +14,7 @@
 		<hr v-if="showNext"/>
 
 		<mk-remote-caution v-if="note.user.host != null" :href="note.url || note.uri" style="margin-bottom: var(--margin)"/>
-		<x-note v-model="note" :key="note.id" :detail="true"/>
+		<x-note v-model:value="note" :key="note.id" :detail="true"/>
 
 		<button class="_panel _button" v-if="hasPrev && !showPrev" @click="showPrev = true" style="margin: var(--margin) auto 0 auto;"><fa :icon="faChevronDown"/></button>
 		<hr v-if="showPrev"/>
diff --git a/src/client/pages/page-editor/els/page-editor.el.button.vue b/src/client/pages/page-editor/els/page-editor.el.button.vue
index 1b69dd0a3c..bc5ffc4b47 100644
--- a/src/client/pages/page-editor/els/page-editor.el.button.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.button.vue
@@ -3,9 +3,9 @@
 	<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.button') }}</template>
 
 	<section class="xfhsjczc">
-		<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._button.text') }}</span></mk-input>
-		<mk-switch v-model="value.primary"><span>{{ $t('_pages.blocks._button.colored') }}</span></mk-switch>
-		<mk-select v-model="value.action">
+		<mk-input v-model:value="value.text"><span>{{ $t('_pages.blocks._button.text') }}</span></mk-input>
+		<mk-switch v-model:value="value.primary"><span>{{ $t('_pages.blocks._button.colored') }}</span></mk-switch>
+		<mk-select v-model:value="value.action">
 			<template #label>{{ $t('_pages.blocks._button.action') }}</template>
 			<option value="dialog">{{ $t('_pages.blocks._button._action.dialog') }}</option>
 			<option value="resetRandom">{{ $t('_pages.blocks._button._action.resetRandom') }}</option>
@@ -13,12 +13,12 @@
 			<option value="callAiScript">{{ $t('_pages.blocks._button._action.callAiScript') }}</option>
 		</mk-select>
 		<template v-if="value.action === 'dialog'">
-			<mk-input v-model="value.content"><span>{{ $t('_pages.blocks._button._action._dialog.content') }}</span></mk-input>
+			<mk-input v-model:value="value.content"><span>{{ $t('_pages.blocks._button._action._dialog.content') }}</span></mk-input>
 		</template>
 		<template v-else-if="value.action === 'pushEvent'">
-			<mk-input v-model="value.event"><span>{{ $t('_pages.blocks._button._action._pushEvent.event') }}</span></mk-input>
-			<mk-input v-model="value.message"><span>{{ $t('_pages.blocks._button._action._pushEvent.message') }}</span></mk-input>
-			<mk-select v-model="value.var">
+			<mk-input v-model:value="value.event"><span>{{ $t('_pages.blocks._button._action._pushEvent.event') }}</span></mk-input>
+			<mk-input v-model:value="value.message"><span>{{ $t('_pages.blocks._button._action._pushEvent.message') }}</span></mk-input>
+			<mk-select v-model:value="value.var">
 				<template #label>{{ $t('_pages.blocks._button._action._pushEvent.variable') }}</template>
 				<option :value="null">{{ $t('_pages.blocks._button._action._pushEvent.no-variable') }}</option>
 				<option v-for="v in hpml.getVarsByType()" :value="v.name">{{ v.name }}</option>
@@ -31,7 +31,7 @@
 			</mk-select>
 		</template>
 		<template v-else-if="value.action === 'callAiScript'">
-			<mk-input v-model="value.fn"><span>{{ $t('_pages.blocks._button._action._callAiScript.functionName') }}</span></mk-input>
+			<mk-input v-model:value="value.fn"><span>{{ $t('_pages.blocks._button._action._callAiScript.functionName') }}</span></mk-input>
 		</template>
 	</section>
 </x-container>
diff --git a/src/client/pages/page-editor/els/page-editor.el.canvas.vue b/src/client/pages/page-editor/els/page-editor.el.canvas.vue
index b5c12f3cf9..385ab444de 100644
--- a/src/client/pages/page-editor/els/page-editor.el.canvas.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.canvas.vue
@@ -3,9 +3,9 @@
 	<template #header><fa :icon="faPaintBrush"/> {{ $t('_pages.blocks.canvas') }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
-		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._canvas.id') }}</span></mk-input>
-		<mk-input v-model="value.width" type="number"><span>{{ $t('_pages.blocks._canvas.width') }}</span><template #suffix>px</template></mk-input>
-		<mk-input v-model="value.height" type="number"><span>{{ $t('_pages.blocks._canvas.height') }}</span><template #suffix>px</template></mk-input>
+		<mk-input v-model:value="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._canvas.id') }}</span></mk-input>
+		<mk-input v-model:value="value.width" type="number"><span>{{ $t('_pages.blocks._canvas.width') }}</span><template #suffix>px</template></mk-input>
+		<mk-input v-model:value="value.height" type="number"><span>{{ $t('_pages.blocks._canvas.height') }}</span><template #suffix>px</template></mk-input>
 	</section>
 </x-container>
 </template>
diff --git a/src/client/pages/page-editor/els/page-editor.el.counter.vue b/src/client/pages/page-editor/els/page-editor.el.counter.vue
index 1b6900b4d7..3c74a60594 100644
--- a/src/client/pages/page-editor/els/page-editor.el.counter.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.counter.vue
@@ -3,9 +3,9 @@
 	<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.counter') }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
-		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._counter.name') }}</span></mk-input>
-		<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._counter.text') }}</span></mk-input>
-		<mk-input v-model="value.inc" type="number"><span>{{ $t('_pages.blocks._counter.inc') }}</span></mk-input>
+		<mk-input v-model:value="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._counter.name') }}</span></mk-input>
+		<mk-input v-model:value="value.text"><span>{{ $t('_pages.blocks._counter.text') }}</span></mk-input>
+		<mk-input v-model:value="value.inc" type="number"><span>{{ $t('_pages.blocks._counter.inc') }}</span></mk-input>
 	</section>
 </x-container>
 </template>
diff --git a/src/client/pages/page-editor/els/page-editor.el.if.vue b/src/client/pages/page-editor/els/page-editor.el.if.vue
index 3cf085f40e..84bd1026e9 100644
--- a/src/client/pages/page-editor/els/page-editor.el.if.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.if.vue
@@ -8,7 +8,7 @@
 	</template>
 
 	<section class="romcojzs">
-		<mk-select v-model="value.var">
+		<mk-select v-model:value="value.var">
 			<template #label>{{ $t('_pages.blocks._if.variable') }}</template>
 			<option v-for="v in hpml.getVarsByType('boolean')" :value="v.name">{{ v.name }}</option>
 			<optgroup :label="$t('_pages.script.pageVariables')">
@@ -19,7 +19,7 @@
 			</optgroup>
 		</mk-select>
 
-		<x-blocks class="children" v-model="value.children" :hpml="hpml"/>
+		<x-blocks class="children" v-model:value="value.children" :hpml="hpml"/>
 	</section>
 </x-container>
 </template>
diff --git a/src/client/pages/page-editor/els/page-editor.el.number-input.vue b/src/client/pages/page-editor/els/page-editor.el.number-input.vue
index a56493da0f..82c71c71af 100644
--- a/src/client/pages/page-editor/els/page-editor.el.number-input.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.number-input.vue
@@ -3,9 +3,9 @@
 	<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.numberInput') }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
-		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._numberInput.name') }}</span></mk-input>
-		<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._numberInput.text') }}</span></mk-input>
-		<mk-input v-model="value.default" type="number"><span>{{ $t('_pages.blocks._numberInput.default') }}</span></mk-input>
+		<mk-input v-model:value="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._numberInput.name') }}</span></mk-input>
+		<mk-input v-model:value="value.text"><span>{{ $t('_pages.blocks._numberInput.text') }}</span></mk-input>
+		<mk-input v-model:value="value.default" type="number"><span>{{ $t('_pages.blocks._numberInput.default') }}</span></mk-input>
 	</section>
 </x-container>
 </template>
diff --git a/src/client/pages/page-editor/els/page-editor.el.post.vue b/src/client/pages/page-editor/els/page-editor.el.post.vue
index cf02294ff2..43427dd17c 100644
--- a/src/client/pages/page-editor/els/page-editor.el.post.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.post.vue
@@ -3,9 +3,9 @@
 	<template #header><fa :icon="faPaperPlane"/> {{ $t('_pages.blocks.post') }}</template>
 
 	<section style="padding: 16px;">
-		<mk-textarea v-model="value.text">{{ $t('_pages.blocks._post.text') }}</mk-textarea>
-		<mk-switch v-model="value.attachCanvasImage"><span>{{ $t('_pages.blocks._post.attachCanvasImage') }}</span></mk-switch>
-		<mk-input v-if="value.attachCanvasImage" v-model="value.canvasId"><span>{{ $t('_pages.blocks._post.canvasId') }}</span></mk-input>
+		<mk-textarea v-model:value="value.text">{{ $t('_pages.blocks._post.text') }}</mk-textarea>
+		<mk-switch v-model:value="value.attachCanvasImage"><span>{{ $t('_pages.blocks._post.attachCanvasImage') }}</span></mk-switch>
+		<mk-input v-if="value.attachCanvasImage" v-model:value="value.canvasId"><span>{{ $t('_pages.blocks._post.canvasId') }}</span></mk-input>
 	</section>
 </x-container>
 </template>
diff --git a/src/client/pages/page-editor/els/page-editor.el.radio-button.vue b/src/client/pages/page-editor/els/page-editor.el.radio-button.vue
index b209d61322..9a77d45049 100644
--- a/src/client/pages/page-editor/els/page-editor.el.radio-button.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.radio-button.vue
@@ -3,10 +3,10 @@
 	<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.radioButton') }}</template>
 
 	<section style="padding: 0 16px 16px 16px;">
-		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._radioButton.name') }}</span></mk-input>
-		<mk-input v-model="value.title"><span>{{ $t('_pages.blocks._radioButton.title') }}</span></mk-input>
-		<mk-textarea v-model="values"><span>{{ $t('_pages.blocks._radioButton.values') }}</span></mk-textarea>
-		<mk-input v-model="value.default"><span>{{ $t('_pages.blocks._radioButton.default') }}</span></mk-input>
+		<mk-input v-model:value="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._radioButton.name') }}</span></mk-input>
+		<mk-input v-model:value="value.title"><span>{{ $t('_pages.blocks._radioButton.title') }}</span></mk-input>
+		<mk-textarea v-model:value="values"><span>{{ $t('_pages.blocks._radioButton.values') }}</span></mk-textarea>
+		<mk-input v-model:value="value.default"><span>{{ $t('_pages.blocks._radioButton.default') }}</span></mk-input>
 	</section>
 </x-container>
 </template>
diff --git a/src/client/pages/page-editor/els/page-editor.el.section.vue b/src/client/pages/page-editor/els/page-editor.el.section.vue
index 0b5db0f2ae..41b9cf86e7 100644
--- a/src/client/pages/page-editor/els/page-editor.el.section.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.section.vue
@@ -11,7 +11,7 @@
 	</template>
 
 	<section class="ilrvjyvi">
-		<x-blocks class="children" v-model="value.children" :hpml="hpml"/>
+		<x-blocks class="children" v-model:value="value.children" :hpml="hpml"/>
 	</section>
 </x-container>
 </template>
diff --git a/src/client/pages/page-editor/els/page-editor.el.switch.vue b/src/client/pages/page-editor/els/page-editor.el.switch.vue
index 4899ec6045..eff7360778 100644
--- a/src/client/pages/page-editor/els/page-editor.el.switch.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.switch.vue
@@ -3,9 +3,9 @@
 	<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.switch') }}</template>
 
 	<section class="kjuadyyj">
-		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._switch.name') }}</span></mk-input>
-		<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._switch.text') }}</span></mk-input>
-		<mk-switch v-model="value.default"><span>{{ $t('_pages.blocks._switch.default') }}</span></mk-switch>
+		<mk-input v-model:value="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._switch.name') }}</span></mk-input>
+		<mk-input v-model:value="value.text"><span>{{ $t('_pages.blocks._switch.text') }}</span></mk-input>
+		<mk-switch v-model:value="value.default"><span>{{ $t('_pages.blocks._switch.default') }}</span></mk-switch>
 	</section>
 </x-container>
 </template>
diff --git a/src/client/pages/page-editor/els/page-editor.el.text-input.vue b/src/client/pages/page-editor/els/page-editor.el.text-input.vue
index f9f8b674fd..56e81fb657 100644
--- a/src/client/pages/page-editor/els/page-editor.el.text-input.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.text-input.vue
@@ -3,9 +3,9 @@
 	<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.textInput') }}</template>
 
 	<section style="padding: 0 16px 0 16px;">
-		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._textInput.name') }}</span></mk-input>
-		<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._textInput.text') }}</span></mk-input>
-		<mk-input v-model="value.default" type="text"><span>{{ $t('_pages.blocks._textInput.default') }}</span></mk-input>
+		<mk-input v-model:value="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._textInput.name') }}</span></mk-input>
+		<mk-input v-model:value="value.text"><span>{{ $t('_pages.blocks._textInput.text') }}</span></mk-input>
+		<mk-input v-model:value="value.default" type="text"><span>{{ $t('_pages.blocks._textInput.default') }}</span></mk-input>
 	</section>
 </x-container>
 </template>
diff --git a/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue b/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue
index 0ad595b2ba..0e5377e6b5 100644
--- a/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue
+++ b/src/client/pages/page-editor/els/page-editor.el.textarea-input.vue
@@ -3,9 +3,9 @@
 	<template #header><fa :icon="faBolt"/> {{ $t('_pages.blocks.textareaInput') }}</template>
 
 	<section style="padding: 0 16px 16px 16px;">
-		<mk-input v-model="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._textareaInput.name') }}</span></mk-input>
-		<mk-input v-model="value.text"><span>{{ $t('_pages.blocks._textareaInput.text') }}</span></mk-input>
-		<mk-textarea v-model="value.default"><span>{{ $t('_pages.blocks._textareaInput.default') }}</span></mk-textarea>
+		<mk-input v-model:value="value.name"><template #prefix><fa :icon="faMagic"/></template><span>{{ $t('_pages.blocks._textareaInput.name') }}</span></mk-input>
+		<mk-input v-model:value="value.text"><span>{{ $t('_pages.blocks._textareaInput.text') }}</span></mk-input>
+		<mk-textarea v-model:value="value.default"><span>{{ $t('_pages.blocks._textareaInput.default') }}</span></mk-textarea>
 	</section>
 </x-container>
 </template>
diff --git a/src/client/pages/page-editor/page-editor.blocks.vue b/src/client/pages/page-editor/page-editor.blocks.vue
index c22c192909..55e7bb7cad 100644
--- a/src/client/pages/page-editor/page-editor.blocks.vue
+++ b/src/client/pages/page-editor/page-editor.blocks.vue
@@ -1,6 +1,6 @@
 <template>
 <x-draggable tag="div" :list="blocks" handle=".drag-handle" :group="{ name: 'blocks' }" animation="150" swap-threshold="0.5">
-	<component v-for="block in blocks" :is="'x-' + block.type" :value="block" @input="updateItem" @remove="() => removeItem(block)" :key="block.id" :hpml="hpml"/>
+	<component v-for="block in blocks" :is="'x-' + block.type" :value="block" @onUpdate:value="updateItem" @remove="() => removeItem(block)" :key="block.id" :hpml="hpml"/>
 </x-draggable>
 </template>
 
@@ -51,7 +51,7 @@ export default defineComponent({
 				v,
 				...this.blocks.slice(i + 1)
 			];
-			this.$emit('input', newValue);
+			this.$emit('update:value', newValue);
 		},
 
 		removeItem(el) {
@@ -60,7 +60,7 @@ export default defineComponent({
 				...this.blocks.slice(0, i),
 				...this.blocks.slice(i + 1)
 			];
-			this.$emit('input', newValue);
+			this.$emit('update:value', newValue);
 		},
 	}
 });
diff --git a/src/client/pages/page-editor/page-editor.script-block.vue b/src/client/pages/page-editor/page-editor.script-block.vue
index 2aac0305ad..5bbd3180b4 100644
--- a/src/client/pages/page-editor/page-editor.script-block.vue
+++ b/src/client/pages/page-editor/page-editor.script-block.vue
@@ -40,17 +40,17 @@
 		<input v-model="value.value"/>
 	</section>
 	<section v-else-if="value.type === 'fn'" class="" style="padding:0 16px 16px 16px;">
-		<mk-textarea v-model="slots">
+		<mk-textarea v-model:value="slots">
 			<span>{{ $t('_pages.script.blocks._fn.slots') }}</span>
 			<template #desc>{{ $t('_pages.script.blocks._fn.slots-info') }}</template>
 		</mk-textarea>
-		<x-v v-if="value.value.expression" v-model="value.value.expression" :title="$t(`_pages.script.blocks._fn.arg1`)" :get-expected-type="() => null" :hpml="hpml" :fn-slots="value.value.slots" :name="name"/>
+		<x-v v-if="value.value.expression" v-model:value="value.value.expression" :title="$t(`_pages.script.blocks._fn.arg1`)" :get-expected-type="() => null" :hpml="hpml" :fn-slots="value.value.slots" :name="name"/>
 	</section>
 	<section v-else-if="value.type.startsWith('fn:')" class="" style="padding:16px;">
-		<x-v v-for="(x, i) in value.args" v-model="value.args[i]" :title="hpml.getVarByName(value.type.split(':')[1]).value.slots[i].name" :get-expected-type="() => null" :hpml="hpml" :name="name" :key="i"/>
+		<x-v v-for="(x, i) in value.args" v-model:value="value.args[i]" :title="hpml.getVarByName(value.type.split(':')[1]).value.slots[i].name" :get-expected-type="() => null" :hpml="hpml" :name="name" :key="i"/>
 	</section>
 	<section v-else class="" style="padding:16px;">
-		<x-v v-for="(x, i) in value.args" v-model="value.args[i]" :title="$t(`_pages.script.blocks._${value.type}.arg${i + 1}`)" :get-expected-type="() => _getExpectedType(i)" :hpml="hpml" :name="name" :fn-slots="fnSlots" :key="i"/>
+		<x-v v-for="(x, i) in value.args" v-model:value="value.args[i]" :title="$t(`_pages.script.blocks._${value.type}.arg${i + 1}`)" :get-expected-type="() => _getExpectedType(i)" :hpml="hpml" :name="name" :fn-slots="fnSlots" :key="i"/>
 	</section>
 </x-container>
 </template>
diff --git a/src/client/pages/page-editor/page-editor.vue b/src/client/pages/page-editor/page-editor.vue
index c1c3ce05aa..da6f925ebb 100644
--- a/src/client/pages/page-editor/page-editor.vue
+++ b/src/client/pages/page-editor/page-editor.vue
@@ -13,29 +13,29 @@
 		<section>
 			<router-link class="view" v-if="pageId" :to="`/@${ author.username }/pages/${ currentName }`"><fa :icon="faExternalLinkSquareAlt"/> {{ $t('_pages.viewPage') }}</router-link>
 
-			<mk-input v-model="title">
+			<mk-input v-model:value="title">
 				<span>{{ $t('_pages.title') }}</span>
 			</mk-input>
 
 			<template v-if="showOptions">
-				<mk-input v-model="summary">
+				<mk-input v-model:value="summary">
 					<span>{{ $t('_pages.summary') }}</span>
 				</mk-input>
 
-				<mk-input v-model="name">
+				<mk-input v-model:value="name">
 					<template #prefix>{{ url }}/@{{ author.username }}/pages/</template>
 					<span>{{ $t('_pages.url') }}</span>
 				</mk-input>
 
-				<mk-switch v-model="alignCenter">{{ $t('_pages.alignCenter') }}</mk-switch>
+				<mk-switch v-model:value="alignCenter">{{ $t('_pages.alignCenter') }}</mk-switch>
 
-				<mk-select v-model="font">
+				<mk-select v-model:value="font">
 					<template #label>{{ $t('_pages.font') }}</template>
 					<option value="serif">{{ $t('_pages.fontSerif') }}</option>
 					<option value="sans-serif">{{ $t('_pages.fontSansSerif') }}</option>
 				</mk-select>
 
-				<mk-switch v-model="hideTitleWhenPinned">{{ $t('_pages.hideTitleWhenPinned') }}</mk-switch>
+				<mk-switch v-model:value="hideTitleWhenPinned">{{ $t('_pages.hideTitleWhenPinned') }}</mk-switch>
 
 				<div class="eyeCatch">
 					<mk-button v-if="eyeCatchingImageId == null && !readonly" @click="setEyeCatchingImage()"><fa :icon="faPlus"/> {{ $t('_pages.eyeCatchingImageSet') }}</mk-button>
@@ -46,7 +46,7 @@
 				</div>
 			</template>
 
-			<x-blocks class="content" v-model="content" :hpml="hpml"/>
+			<x-blocks class="content" v-model:value="content" :hpml="hpml"/>
 
 			<mk-button @click="add()" v-if="!readonly"><fa :icon="faPlus"/></mk-button>
 		</section>
@@ -59,7 +59,7 @@
 				<x-variable v-for="variable in variables"
 					:value="variable"
 					:removable="true"
-					@input="v => updateVariable(v)"
+					@onUpdate:value="v => updateVariable(v)"
 					@remove="() => removeVariable(variable)"
 					:key="variable.name"
 					:hpml="hpml"
@@ -76,7 +76,7 @@
 	<mk-container :body-togglable="true" :expanded="true">
 		<template #header><fa :icon="faCode"/> {{ $t('script') }}</template>
 		<div>
-			<prism-editor class="_code" v-model="script" :highlight="highlighter" :line-numbers="false"/>
+			<prism-editor class="_code" v-model:value="script" :highlight="highlighter" :line-numbers="false"/>
 		</div>
 	</mk-container>
 </div>
diff --git a/src/client/pages/pages.vue b/src/client/pages/pages.vue
index ebb74f3132..b4ac3548ab 100644
--- a/src/client/pages/pages.vue
+++ b/src/client/pages/pages.vue
@@ -2,7 +2,7 @@
 <div>
 	<portal to="header"><fa :icon="faStickyNote"/>{{ $t('pages') }}</portal>
 
-	<mk-tab v-model="tab" :items="[{ label: $t('_pages.my'), value: 'my', icon: faEdit }, { label: $t('_pages.liked'), value: 'liked', icon: faHeart }]"/>
+	<mk-tab v-model:value="tab" :items="[{ label: $t('_pages.my'), value: 'my', icon: faEdit }, { label: $t('_pages.liked'), value: 'liked', icon: faHeart }]"/>
 
 	<div class="rknalgpo my" v-if="tab === 'my'">
 		<mk-button class="new" @click="create()"><fa :icon="faPlus"/></mk-button>
diff --git a/src/client/pages/preferences/index.vue b/src/client/pages/preferences/index.vue
index 3589103e71..44d7b79238 100644
--- a/src/client/pages/preferences/index.vue
+++ b/src/client/pages/preferences/index.vue
@@ -13,43 +13,43 @@
 	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faMusic"/> {{ $t('sounds') }}</div>
 		<div class="_content">
-			<mk-range v-model="sfxVolume" :min="0" :max="1" :step="0.1">
+			<mk-range v-model:value="sfxVolume" :min="0" :max="1" :step="0.1">
 				<fa slot="icon" :icon="volumeIcon"/>
 				<span slot="title">{{ $t('volume') }}</span>
 			</mk-range>
 		</div>
 		<div class="_content">
-			<mk-select v-model="sfxNote">
+			<mk-select v-model:value="sfxNote">
 				<template #label>{{ $t('_sfx.note') }}</template>
 				<option v-for="sound in sounds" :value="sound" :key="sound">{{ sound || $t('none') }}</option>
 				<template #text><button class="_textButton" @click="listen(sfxNote)" v-if="sfxNote"><fa :icon="faPlay"/> {{ $t('listen') }}</button></template>
 			</mk-select>
-			<mk-select v-model="sfxNoteMy">
+			<mk-select v-model:value="sfxNoteMy">
 				<template #label>{{ $t('_sfx.noteMy') }}</template>
 				<option v-for="sound in sounds" :value="sound" :key="sound">{{ sound || $t('none') }}</option>
 				<template #text><button class="_textButton" @click="listen(sfxNoteMy)" v-if="sfxNoteMy"><fa :icon="faPlay"/> {{ $t('listen') }}</button></template>
 			</mk-select>
-			<mk-select v-model="sfxNotification">
+			<mk-select v-model:value="sfxNotification">
 				<template #label>{{ $t('_sfx.notification') }}</template>
 				<option v-for="sound in sounds" :value="sound" :key="sound">{{ sound || $t('none') }}</option>
 				<template #text><button class="_textButton" @click="listen(sfxNotification)" v-if="sfxNotification"><fa :icon="faPlay"/> {{ $t('listen') }}</button></template>
 			</mk-select>
-			<mk-select v-model="sfxChat">
+			<mk-select v-model:value="sfxChat">
 				<template #label>{{ $t('_sfx.chat') }}</template>
 				<option v-for="sound in sounds" :value="sound" :key="sound">{{ sound || $t('none') }}</option>
 				<template #text><button class="_textButton" @click="listen(sfxChat)" v-if="sfxChat"><fa :icon="faPlay"/> {{ $t('listen') }}</button></template>
 			</mk-select>
-			<mk-select v-model="sfxChatBg">
+			<mk-select v-model:value="sfxChatBg">
 				<template #label>{{ $t('_sfx.chatBg') }}</template>
 				<option v-for="sound in sounds" :value="sound" :key="sound">{{ sound || $t('none') }}</option>
 				<template #text><button class="_textButton" @click="listen(sfxChatBg)" v-if="sfxChatBg"><fa :icon="faPlay"/> {{ $t('listen') }}</button></template>
 			</mk-select>
-			<mk-select v-model="sfxAntenna">
+			<mk-select v-model:value="sfxAntenna">
 				<template #label>{{ $t('_sfx.antenna') }}</template>
 				<option v-for="sound in sounds" :value="sound" :key="sound">{{ sound || $t('none') }}</option>
 				<template #text><button class="_textButton" @click="listen(sfxAntenna)" v-if="sfxAntenna"><fa :icon="faPlay"/> {{ $t('listen') }}</button></template>
 			</mk-select>
-			<mk-select v-model="sfxChannel">
+			<mk-select v-model:value="sfxChannel">
 				<template #label>{{ $t('_sfx.channel') }}</template>
 				<option v-for="sound in sounds" :value="sound" :key="sound">{{ sound || $t('none') }}</option>
 				<template #text><button class="_textButton" @click="listen(sfxChannel)" v-if="sfxChannel"><fa :icon="faPlay"/> {{ $t('listen') }}</button></template>
@@ -60,34 +60,34 @@
 	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faColumns"/> {{ $t('deck') }}</div>
 		<div class="_content">
-			<mk-switch v-model="deckAlwaysShowMainColumn">
+			<mk-switch v-model:value="deckAlwaysShowMainColumn">
 				{{ $t('_deck.alwaysShowMainColumn') }}
 			</mk-switch>
 		</div>
 		<div class="_content">
 			<div>{{ $t('_deck.columnAlign') }}</div>
-			<mk-radio v-model="deckColumnAlign" value="left">{{ $t('left') }}</mk-radio>
-			<mk-radio v-model="deckColumnAlign" value="center">{{ $t('center') }}</mk-radio>
+			<mk-radio v-model:value="deckColumnAlign" value="left">{{ $t('left') }}</mk-radio>
+			<mk-radio v-model:value="deckColumnAlign" value="center">{{ $t('center') }}</mk-radio>
 		</div>
 	</section>
 
 	<section class="_card _vMargin">
 		<div class="_title"><fa :icon="faCog"/> {{ $t('appearance') }}</div>
 		<div class="_content">
-			<mk-switch v-model="disableAnimatedMfm">{{ $t('disableAnimatedMfm') }}</mk-switch>
-			<mk-switch v-model="reduceAnimation">{{ $t('reduceUiAnimation') }}</mk-switch>
-			<mk-switch v-model="useBlurEffectForModal">{{ $t('useBlurEffectForModal') }}</mk-switch>
-			<mk-switch v-model="useOsNativeEmojis">
+			<mk-switch v-model:value="disableAnimatedMfm">{{ $t('disableAnimatedMfm') }}</mk-switch>
+			<mk-switch v-model:value="reduceAnimation">{{ $t('reduceUiAnimation') }}</mk-switch>
+			<mk-switch v-model:value="useBlurEffectForModal">{{ $t('useBlurEffectForModal') }}</mk-switch>
+			<mk-switch v-model:value="useOsNativeEmojis">
 				{{ $t('useOsNativeEmojis') }}
 				<template #desc><mfm text="🍮🍦🍭🍩🍰🍫🍬🥞🍪"/></template>
 			</mk-switch>
 		</div>
 		<div class="_content">
 			<div>{{ $t('fontSize') }}</div>
-			<mk-radio v-model="fontSize" value="small"><span style="font-size: 14px;">Aa</span></mk-radio>
-			<mk-radio v-model="fontSize" :value="null"><span style="font-size: 16px;">Aa</span></mk-radio>
-			<mk-radio v-model="fontSize" value="large"><span style="font-size: 18px;">Aa</span></mk-radio>
-			<mk-radio v-model="fontSize" value="veryLarge"><span style="font-size: 20px;">Aa</span></mk-radio>
+			<mk-radio v-model:value="fontSize" value="small"><span style="font-size: 14px;">Aa</span></mk-radio>
+			<mk-radio v-model:value="fontSize" :value="null"><span style="font-size: 16px;">Aa</span></mk-radio>
+			<mk-radio v-model:value="fontSize" value="large"><span style="font-size: 18px;">Aa</span></mk-radio>
+			<mk-radio v-model:value="fontSize" value="veryLarge"><span style="font-size: 20px;">Aa</span></mk-radio>
 		</div>
 	</section>
 
@@ -95,19 +95,19 @@
 		<div class="_title"><fa :icon="faCog"/> {{ $t('general') }}</div>
 		<div class="_content">
 			<div>{{ $t('whenServerDisconnected') }}</div>
-			<mk-radio v-model="serverDisconnectedBehavior" value="reload">{{ $t('_serverDisconnectedBehavior.reload') }}</mk-radio>
-			<mk-radio v-model="serverDisconnectedBehavior" value="dialog">{{ $t('_serverDisconnectedBehavior.dialog') }}</mk-radio>
-			<mk-radio v-model="serverDisconnectedBehavior" value="quiet">{{ $t('_serverDisconnectedBehavior.quiet') }}</mk-radio>
+			<mk-radio v-model:value="serverDisconnectedBehavior" value="reload">{{ $t('_serverDisconnectedBehavior.reload') }}</mk-radio>
+			<mk-radio v-model:value="serverDisconnectedBehavior" value="dialog">{{ $t('_serverDisconnectedBehavior.dialog') }}</mk-radio>
+			<mk-radio v-model:value="serverDisconnectedBehavior" value="quiet">{{ $t('_serverDisconnectedBehavior.quiet') }}</mk-radio>
 		</div>
 		<div class="_content">
-			<mk-switch v-model="imageNewTab">{{ $t('openImageInNewTab') }}</mk-switch>
-			<mk-switch v-model="showFixedPostForm">{{ $t('showFixedPostForm') }}</mk-switch>
-			<mk-switch v-model="enableInfiniteScroll">{{ $t('enableInfiniteScroll') }}</mk-switch>
-			<mk-switch v-model="fixedWidgetsPosition">{{ $t('fixedWidgetsPosition') }}</mk-switch>
-			<mk-switch v-model="disablePagesScript">{{ $t('disablePagesScript') }}</mk-switch>
+			<mk-switch v-model:value="imageNewTab">{{ $t('openImageInNewTab') }}</mk-switch>
+			<mk-switch v-model:value="showFixedPostForm">{{ $t('showFixedPostForm') }}</mk-switch>
+			<mk-switch v-model:value="enableInfiniteScroll">{{ $t('enableInfiniteScroll') }}</mk-switch>
+			<mk-switch v-model:value="fixedWidgetsPosition">{{ $t('fixedWidgetsPosition') }}</mk-switch>
+			<mk-switch v-model:value="disablePagesScript">{{ $t('disablePagesScript') }}</mk-switch>
 		</div>
 		<div class="_content">
-			<mk-select v-model="lang">
+			<mk-select v-model:value="lang">
 				<template #label>{{ $t('uiLanguage') }}</template>
 
 				<option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
diff --git a/src/client/pages/preferences/plugins.vue b/src/client/pages/preferences/plugins.vue
index 3cb64a64cd..5af517003e 100644
--- a/src/client/pages/preferences/plugins.vue
+++ b/src/client/pages/preferences/plugins.vue
@@ -5,7 +5,7 @@
 		<details>
 			<summary><fa :icon="faDownload"/> {{ $t('install') }}</summary>
 			<mk-info warn>{{ $t('pluginInstallWarn') }}</mk-info>
-			<mk-textarea v-model="script" tall>
+			<mk-textarea v-model:value="script" tall>
 				<span>{{ $t('script') }}</span>
 			</mk-textarea>
 			<mk-button @click="install()" primary><fa :icon="faSave"/> {{ $t('install') }}</mk-button>
@@ -14,7 +14,7 @@
 	<div class="_content">
 		<details>
 			<summary><fa :icon="faFolderOpen"/> {{ $t('manage') }}</summary>
-			<mk-select v-model="selectedPluginId">
+			<mk-select v-model:value="selectedPluginId">
 				<option v-for="x in $store.state.deviceUser.plugins" :value="x.id" :key="x.id">{{ x.name }}</option>
 			</mk-select>
 			<template v-if="selectedPlugin">
diff --git a/src/client/pages/preferences/sidebar.vue b/src/client/pages/preferences/sidebar.vue
index 6f15b2c0af..f64658920b 100644
--- a/src/client/pages/preferences/sidebar.vue
+++ b/src/client/pages/preferences/sidebar.vue
@@ -2,16 +2,16 @@
 <section class="_card">
 	<div class="_title"><fa :icon="faListUl"/> {{ $t('sidebar') }}</div>
 	<div class="_content">
-		<mk-textarea v-model="items" tall>
+		<mk-textarea v-model:value="items" tall>
 			<span>{{ $t('sidebar') }}</span>
 			<template #desc><button class="_textButton" @click="addItem">{{ $t('addItem') }}</button></template>
 		</mk-textarea>
 	</div>
 	<div class="_content">
 		<div>{{ $t('display') }}</div>
-		<mk-radio v-model="sidebarDisplay" value="full">{{ $t('_sidebar.full') }}</mk-radio>
-		<mk-radio v-model="sidebarDisplay" value="icon">{{ $t('_sidebar.icon') }}</mk-radio>
-		<!-- <mk-radio v-model="sidebarDisplay" value="hide" disabled>{{ $t('_sidebar.hide') }}</mk-radio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
+		<mk-radio v-model:value="sidebarDisplay" value="full">{{ $t('_sidebar.full') }}</mk-radio>
+		<mk-radio v-model:value="sidebarDisplay" value="icon">{{ $t('_sidebar.icon') }}</mk-radio>
+		<!-- <mk-radio v-model:value="sidebarDisplay" value="hide" disabled>{{ $t('_sidebar.hide') }}</mk-radio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 -->
 	</div>
 	<div class="_footer">
 		<mk-button inline @click="save()" primary><fa :icon="faSave"/> {{ $t('save') }}</mk-button>
diff --git a/src/client/pages/preferences/theme.vue b/src/client/pages/preferences/theme.vue
index 2cce0a5a9b..d968950ed8 100644
--- a/src/client/pages/preferences/theme.vue
+++ b/src/client/pages/preferences/theme.vue
@@ -22,10 +22,10 @@
 				</label>
 			</div>
 		</div>
-		<mk-switch v-model="syncDeviceDarkMode">{{ $t('syncDeviceDarkMode') }}</mk-switch>
+		<mk-switch v-model:value="syncDeviceDarkMode">{{ $t('syncDeviceDarkMode') }}</mk-switch>
 	</div>
 	<div class="_content">
-		<mk-select v-model="lightTheme">
+		<mk-select v-model:value="lightTheme">
 			<template #label>{{ $t('themeForLightMode') }}</template>
 			<optgroup :label="$t('lightThemes')">
 				<option v-for="x in lightThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
@@ -34,7 +34,7 @@
 				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 			</optgroup>
 		</mk-select>
-		<mk-select v-model="darkTheme">
+		<mk-select v-model:value="darkTheme">
 			<template #label>{{ $t('themeForDarkMode') }}</template>
 			<optgroup :label="$t('darkThemes')">
 				<option v-for="x in darkThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
@@ -52,7 +52,7 @@
 	<div class="_content">
 		<details>
 			<summary><fa :icon="faDownload"/> {{ $t('_theme.install') }}</summary>
-			<mk-textarea v-model="installThemeCode">
+			<mk-textarea v-model:value="installThemeCode">
 				<span>{{ $t('_theme.code') }}</span>
 			</mk-textarea>
 			<mk-button @click="() => install(installThemeCode)" :disabled="installThemeCode == null" primary inline><fa :icon="faCheck"/> {{ $t('install') }}</mk-button>
@@ -62,7 +62,7 @@
 	<div class="_content">
 		<details>
 			<summary><fa :icon="faFolderOpen"/> {{ $t('_theme.manage') }}</summary>
-			<mk-select v-model="selectedThemeId">
+			<mk-select v-model:value="selectedThemeId">
 				<option v-for="x in installedThemes" :value="x.id" :key="x.id">{{ x.name }}</option>
 			</mk-select>
 			<template v-if="selectedTheme">
diff --git a/src/client/pages/room/room.vue b/src/client/pages/room/room.vue
index c74b1fde29..6466f1aa26 100644
--- a/src/client/pages/room/room.vue
+++ b/src/client/pages/room/room.vue
@@ -39,7 +39,7 @@
 			<mk-button @click="add()"><fa :icon="faBoxOpen"/> {{ $t('_rooms.addFurniture') }}</mk-button>
 		</div>
 		<div class="_content">
-			<mk-select :value="roomType" @input="updateRoomType($event)">
+			<mk-select :value="roomType" @onUpdate:value="updateRoomType($event)">
 				<template #label>{{ $t('_rooms.roomType') }}</template>
 				<option value="default">{{ $t('_rooms._roomType.default') }}</option>
 				<option value="washitsu">{{ $t('_rooms._roomType.washitsu') }}</option>
diff --git a/src/client/pages/scratchpad.vue b/src/client/pages/scratchpad.vue
index 8082a9b752..db17d1a1a0 100644
--- a/src/client/pages/scratchpad.vue
+++ b/src/client/pages/scratchpad.vue
@@ -3,7 +3,7 @@
 	<portal to="header"><fa :icon="faTerminal"/>{{ $t('scratchpad') }}</portal>
 
 	<div class="_panel">
-		<prism-editor class="_code" v-model="code" :highlight="highlighter" :line-numbers="false"/>
+		<prism-editor class="_code" v-model:value="code" :highlight="highlighter" :line-numbers="false"/>
 		<mk-button style="position: absolute; top: 8px; right: 8px;" @click="run()" primary><fa :icon="faPlay"/></mk-button>
 	</div>
 
diff --git a/src/client/pages/theme-editor.vue b/src/client/pages/theme-editor.vue
index 8e6c531daa..e2ca7fb04c 100644
--- a/src/client/pages/theme-editor.vue
+++ b/src/client/pages/theme-editor.vue
@@ -4,13 +4,13 @@
 
 	<section class="_card">
 		<div class="_content">
-			<mk-input v-model="name" required><span>{{ $t('name') }}</span></mk-input>
-			<mk-input v-model="author" required><span>{{ $t('author') }}</span></mk-input>
-			<mk-textarea v-model="description"><span>{{ $t('description') }}</span></mk-textarea>
+			<mk-input v-model:value="name" required><span>{{ $t('name') }}</span></mk-input>
+			<mk-input v-model:value="author" required><span>{{ $t('author') }}</span></mk-input>
+			<mk-textarea v-model:value="description"><span>{{ $t('description') }}</span></mk-textarea>
 			<div class="_inputs">
 				<div v-text="$t('_theme.base')" />
-				<mk-radio v-model="baseTheme" value="light">{{ $t('light') }}</mk-radio>
-				<mk-radio v-model="baseTheme" value="dark">{{ $t('dark') }}</mk-radio>
+				<mk-radio v-model:value="baseTheme" value="light">{{ $t('light') }}</mk-radio>
+				<mk-radio v-model:value="baseTheme" value="dark">{{ $t('dark') }}</mk-radio>
 			</div>
 		</div>
 		<div class="_content">
@@ -30,25 +30,25 @@
 							<!-- color -->
 							<div v-else-if="typeof v === 'string'" class="color">
 								<input type="color" :value="v" @input="colorChanged($event.target.value, i)"/>
-								<mk-input class="select" :value="v" @input="colorChanged($event, i)"/>
+								<mk-input class="select" :value="v" @onUpdate:value="colorChanged($event, i)"/>
 							</div>
 							<!-- ref const -->
-							<mk-input v-else-if="v.type === 'refConst'" v-model="v.key">
+							<mk-input v-else-if="v.type === 'refConst'" v-model:value="v.key">
 								<template #prefix>$</template>
 								<span>{{ $t('name') }}</span>
 							</mk-input>
 							<!-- ref props -->
-							<mk-select class="select" v-else-if="v.type === 'refProp'" v-model="v.key">
+							<mk-select class="select" v-else-if="v.type === 'refProp'" v-model:value="v.key">
 								<option v-for="key in themeProps" :value="key" :key="key">{{ $t('_theme.keys.' + key) }}</option>
 							</mk-select>
 							<!-- func -->
 							<template v-else-if="v.type === 'func'">
-								<mk-select class="select" v-model="v.name">
+								<mk-select class="select" v-model:value="v.name">
 									<template #label>{{ $t('_theme.funcKind') }}</template>
 									<option v-for="n in ['alpha', 'darken', 'lighten']" :value="n" :key="n">{{ $t('_theme.' + n) }}</option>
 								</mk-select>
-								<mk-input type="number" v-model="v.arg"><span>{{ $t('_theme.argument') }}</span></mk-input>
-								<mk-select class="select" v-model="v.value">
+								<mk-input type="number" v-model:value="v.arg"><span>{{ $t('_theme.argument') }}</span></mk-input>
+								<mk-select class="select" v-model:value="v.value">
 									<template #label>{{ $t('_theme.basedProp') }}</template>
 									<option v-for="key in themeProps" :value="key" :key="key">{{ $t('_theme.keys.' + key) }}</option>
 								</mk-select>
@@ -60,7 +60,7 @@
 			</div>
 		</div>
 		<div class="_content">
-				<mk-textarea v-model="themeToImport">
+				<mk-textarea v-model:value="themeToImport">
 					{{ $t('_theme.importInfo') }}
 				</mk-textarea>
 				<mk-button :disabled="!themeToImport.trim()" @click="importTheme">{{ $t('import') }}</mk-button>