From 1f7ddc9d7cc573a7d072bef42577bfa5f6624b5f Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Fri, 11 Aug 2023 17:44:46 -0700
Subject: [PATCH 1/2] refactor: :recycle: No Vue Reactivity

Performed with https://github.com/edison1105/drop-reactivity-transform , Reactivity Transform was an experimental feature and has now been deprecated.
---
 .../client/src/components/MkAbuseReport.vue   |   6 +-
 .../client/src/components/MkAnalogClock.vue   |  62 ++--
 packages/client/src/components/MkButton.vue   |  12 +-
 .../src/components/MkCheatSheetDialog.vue     |   4 +-
 .../client/src/components/MkContextMenu.vue   |  17 +-
 .../client/src/components/MkCropperDialog.vue |  16 +-
 packages/client/src/components/MkDialog.vue   |  12 +-
 .../client/src/components/MkFollowButton.vue  |  27 +-
 .../src/components/MkForgotPassword.vue       |  18 +-
 packages/client/src/components/MkHeatmap.vue  |  18 +-
 .../client/src/components/MkImageViewer.vue   |   4 +-
 .../src/components/MkImgWithBlurhash.vue      |  12 +-
 .../src/components/MkInstanceCardMini.vue     |   6 +-
 .../src/components/MkInstanceSelectDialog.vue |  26 +-
 .../client/src/components/MkInstanceStats.vue |  16 +-
 .../src/components/MkInstanceTicker.vue       |   4 +-
 .../client/src/components/MkLaunchPad.vue     |   6 +-
 packages/client/src/components/MkLink.vue     |   8 +-
 packages/client/src/components/MkMedia.vue    |   4 +-
 .../client/src/components/MkMediaBanner.vue   |  12 +-
 packages/client/src/components/MkMenu.vue     |  33 +-
 .../client/src/components/MkMiniChart.vue     |  20 +-
 packages/client/src/components/MkModal.vue    | 111 +++---
 .../src/components/MkModalPageWindow.vue      |  38 +-
 .../client/src/components/MkModalWindow.vue   |  10 +-
 packages/client/src/components/MkNote.vue     |  86 +++--
 .../client/src/components/MkNoteDetailed.vue  |  82 +++--
 .../client/src/components/MkNoteHeader.vue    |   7 +-
 packages/client/src/components/MkNoteSub.vue  |  47 +--
 .../MkNotificationSettingWindow.vue           |  32 +-
 .../src/components/MkNotificationToast.vue    |   6 +-
 .../client/src/components/MkPageWindow.vue    |  36 +-
 .../client/src/components/MkPopupMenu.vue     |   4 +-
 packages/client/src/components/MkPostForm.vue | 342 +++++++++---------
 .../src/components/MkPostFormDialog.vue       |   8 +-
 .../MkPushNotificationAllowButton.vue         |  44 ++-
 .../client/src/components/MkReactedUsers.vue  |  22 +-
 .../client/src/components/MkRenoteButton.vue  |  18 +-
 packages/client/src/components/MkSignin.vue   | 109 +++---
 .../client/src/components/MkSigninDialog.vue  |   8 +-
 packages/client/src/components/MkSignup.vue   | 127 +++----
 .../client/src/components/MkSignupDialog.vue  |   8 +-
 .../src/components/MkSubNoteContent.vue       |  14 +-
 packages/client/src/components/MkTagCloud.vue |  20 +-
 packages/client/src/components/MkTimeline.vue |  16 +-
 packages/client/src/components/MkToast.vue    |   6 +-
 .../src/components/MkTokenGenerateWindow.vue  |  28 +-
 .../src/components/MkTutorialDialog.vue       |   6 +-
 packages/client/src/components/MkUpdated.vue  |  16 +-
 .../client/src/components/MkUrlPreview.vue    |  42 +--
 .../src/components/MkUrlPreviewPopup.vue      |  10 +-
 .../client/src/components/MkUserCardMini.vue  |   6 +-
 packages/client/src/components/MkUserInfo.vue |   6 +-
 .../src/components/MkUserOnlineIndicator.vue  |   4 +-
 .../client/src/components/MkUserPreview.vue   |  16 +-
 .../src/components/MkUserSelectDialog.vue     |  38 +-
 .../components/MkUserSelectLocalDialog.vue    |  34 +-
 .../client/src/components/MkVisibility.vue    |   8 +-
 .../src/components/MkVisibilityPicker.vue     |  16 +-
 packages/client/src/components/MkWindow.vue   |  74 ++--
 .../client/src/components/form/checkbox.vue   |  10 +-
 packages/client/src/components/form/radio.vue |   4 +-
 packages/client/src/components/form/range.vue |   6 +-
 .../client/src/components/form/textarea.vue   |   2 +-
 packages/client/src/components/global/MkA.vue |   4 +-
 .../client/src/components/global/MkAvatar.vue |   8 +-
 .../src/components/global/MkPageHeader.vue    |  50 +--
 .../client/src/components/global/MkSpacer.vue |  24 +-
 .../components/global/MkStickyContainer.vue   |  23 +-
 .../client/src/components/global/MkTime.vue   |  14 +-
 .../src/components/global/RouterView.vue      |  14 +-
 .../src/components/page/page.textarea.vue     |   6 +-
 packages/client/src/pages/_error_.vue         |  22 +-
 packages/client/src/pages/about-firefish.vue  |  22 +-
 .../client/src/pages/about.federation.vue     |  26 +-
 packages/client/src/pages/about.vue           |  24 +-
 packages/client/src/pages/admin-file.vue      |  40 +-
 packages/client/src/pages/admin/_header_.vue  |   8 +-
 packages/client/src/pages/admin/abuses.vue    |  26 +-
 .../client/src/pages/admin/announcements.vue  |  16 +-
 .../client/src/pages/admin/bot-protection.vue |  34 +-
 .../client/src/pages/admin/custom-css.vue     |   6 +-
 packages/client/src/pages/admin/database.vue  |   6 +-
 .../client/src/pages/admin/email-settings.vue |  48 +--
 .../src/pages/admin/emoji-edit-dialog.vue     |  36 +-
 packages/client/src/pages/admin/emojis.vue    |   4 +-
 .../client/src/pages/admin/experiments.vue    |  19 +-
 .../client/src/pages/admin/federation.vue     |   4 +-
 packages/client/src/pages/admin/files.vue     |  27 +-
 packages/client/src/pages/admin/hashtags.vue  |  13 +-
 packages/client/src/pages/admin/index.vue     | 100 +++--
 .../client/src/pages/admin/instance-block.vue |  21 +-
 .../src/pages/admin/integrations.discord.vue  |  24 +-
 .../src/pages/admin/integrations.github.vue   |  24 +-
 .../client/src/pages/admin/integrations.vue   |  18 +-
 .../client/src/pages/admin/object-storage.vue |  84 ++---
 .../client/src/pages/admin/other-settings.vue |   6 +-
 .../src/pages/admin/overview.active-users.vue |  16 +-
 .../src/pages/admin/overview.ap-requests.vue  |  14 +-
 .../src/pages/admin/overview.federation.vue   |  28 +-
 .../src/pages/admin/overview.heatmap.vue      |   4 +-
 .../src/pages/admin/overview.metrics.vue      |  46 +--
 .../src/pages/admin/overview.moderators.vue   |   8 +-
 .../client/src/pages/admin/overview.queue.vue |  26 +-
 .../client/src/pages/admin/overview.stats.vue |  28 +-
 .../client/src/pages/admin/overview.user.vue  |   6 +-
 .../client/src/pages/admin/overview.users.vue |   8 +-
 packages/client/src/pages/admin/overview.vue  |  50 ++-
 .../client/src/pages/admin/promotions.vue     |  18 +-
 .../client/src/pages/admin/proxy-account.vue  |  24 +-
 .../client/src/pages/admin/queue.chart.vue    |  24 +-
 packages/client/src/pages/admin/queue.vue     |  15 +-
 packages/client/src/pages/admin/relays.vue    |  10 +-
 packages/client/src/pages/admin/security.vue  |  83 +++--
 packages/client/src/pages/admin/settings.vue  | 228 ++++++------
 packages/client/src/pages/admin/users.vue     |  30 +-
 packages/client/src/pages/announcements.vue   |   6 +-
 .../client/src/pages/antenna-timeline.vue     |  26 +-
 packages/client/src/pages/api-console.vue     |   6 +-
 packages/client/src/pages/channel-editor.vue  |  46 +--
 packages/client/src/pages/channel.vue         |  20 +-
 packages/client/src/pages/channels.vue        |  36 +-
 packages/client/src/pages/clip.vue            |  67 ++--
 packages/client/src/pages/drive.vue           |  10 +-
 .../client/src/pages/explore.featured.vue     |   4 +-
 packages/client/src/pages/explore.users.vue   |  18 +-
 packages/client/src/pages/explore.vue         |  14 +-
 packages/client/src/pages/follow-requests.vue |   4 +-
 packages/client/src/pages/gallery/edit.vue    |  46 +--
 packages/client/src/pages/gallery/index.vue   |  18 +-
 packages/client/src/pages/gallery/post.vue    |  42 +--
 packages/client/src/pages/instance-info.vue   |  74 ++--
 packages/client/src/pages/messaging/index.vue |  40 +-
 .../pages/messaging/messaging-room.form.vue   |  69 ++--
 .../messaging/messaging-room.message.vue      |   6 +-
 .../src/pages/messaging/messaging-room.vue    | 138 +++----
 packages/client/src/pages/mfm-cheat-sheet.vue |  74 ++--
 packages/client/src/pages/miauth.vue          |  10 +-
 .../client/src/pages/my-antennas/create.vue   |   4 +-
 .../client/src/pages/my-antennas/edit.vue     |  10 +-
 .../client/src/pages/my-antennas/editor.vue   |  76 ++--
 .../client/src/pages/my-antennas/index.vue    |   6 +-
 packages/client/src/pages/my-clips/index.vue  |  14 +-
 packages/client/src/pages/my-groups/group.vue |   2 +-
 packages/client/src/pages/my-groups/index.vue |   2 +-
 packages/client/src/pages/my-lists/index.vue  |  10 +-
 packages/client/src/pages/my-lists/list.vue   |  38 +-
 packages/client/src/pages/not-found.vue       |   6 +-
 packages/client/src/pages/note.vue            |  96 ++---
 packages/client/src/pages/notifications.vue   |  30 +-
 .../page-editor/els/page-editor.el.image.vue  |   8 +-
 .../page-editor/els/page-editor.el.note.vue   |  21 +-
 .../els/page-editor.el.radio-button.vue       |   8 +-
 .../src/pages/page-editor/page-editor.vue     | 166 ++++-----
 packages/client/src/pages/page.vue            |  68 ++--
 packages/client/src/pages/pages.vue           |  14 +-
 packages/client/src/pages/preview.vue         |   4 +-
 packages/client/src/pages/registry.keys.vue   |  18 +-
 packages/client/src/pages/registry.value.vue  |  34 +-
 packages/client/src/pages/registry.vue        |  10 +-
 packages/client/src/pages/reset-password.vue  |  10 +-
 packages/client/src/pages/scratchpad.vue      |   6 +-
 packages/client/src/pages/search.vue          |  14 +-
 packages/client/src/pages/settings/2fa.vue    |   4 +-
 .../src/pages/settings/account-info.vue       |   6 +-
 .../client/src/pages/settings/accounts.vue    |   6 +-
 packages/client/src/pages/settings/api.vue    |   6 +-
 packages/client/src/pages/settings/apps.vue   |   6 +-
 .../client/src/pages/settings/custom-css.vue  |   6 +-
 .../src/pages/settings/custom-katex-macro.vue |   4 +-
 packages/client/src/pages/settings/deck.vue   |   4 +-
 .../src/pages/settings/delete-account.vue     |   6 +-
 packages/client/src/pages/settings/drive.vue  |  12 +-
 packages/client/src/pages/settings/email.vue  |   6 +-
 .../client/src/pages/settings/general.vue     |   4 +-
 .../src/pages/settings/import-export.vue      |   6 +-
 packages/client/src/pages/settings/index.vue  |  68 ++--
 .../src/pages/settings/instance-mute.vue      |   6 +-
 .../client/src/pages/settings/integration.vue |   4 +-
 .../client/src/pages/settings/migration.vue   |  16 +-
 .../client/src/pages/settings/mute-block.vue  |   8 +-
 packages/client/src/pages/settings/navbar.vue |   4 +-
 .../src/pages/settings/notifications.vue      |  24 +-
 packages/client/src/pages/settings/other.vue  |   4 +-
 .../src/pages/settings/plugin.install.vue     |   6 +-
 packages/client/src/pages/settings/plugin.vue |   6 +-
 .../pages/settings/preferences-backups.vue    |  51 +--
 .../client/src/pages/settings/privacy.vue     |  48 +--
 .../client/src/pages/settings/profile.vue     |   8 +-
 .../client/src/pages/settings/reaction.vue    |  42 ++-
 .../client/src/pages/settings/security.vue    |   6 +-
 packages/client/src/pages/settings/sounds.vue |   4 +-
 .../client/src/pages/settings/statusbar.vue   |   8 +-
 .../src/pages/settings/theme.install.vue      |   8 +-
 .../src/pages/settings/theme.manage.vue       |   4 +-
 packages/client/src/pages/settings/theme.vue  |   4 +-
 .../src/pages/settings/webhook.edit.vue       |  50 +--
 .../client/src/pages/settings/webhook.new.vue |  46 +--
 .../client/src/pages/settings/webhook.vue     |   6 +-
 .../client/src/pages/settings/word-mute.vue   |   6 +-
 packages/client/src/pages/share.vue           |  50 +--
 packages/client/src/pages/signup-complete.vue |   6 +-
 packages/client/src/pages/tag.vue             |  14 +-
 packages/client/src/pages/theme-editor.vue    |  65 ++--
 packages/client/src/pages/timeline.vue        |  24 +-
 packages/client/src/pages/user-info.vue       | 111 +++---
 .../client/src/pages/user-list-timeline.vue   |  22 +-
 packages/client/src/pages/user/followers.vue  |  35 +-
 packages/client/src/pages/user/following.vue  |  35 +-
 packages/client/src/pages/user/home.vue       |  32 +-
 .../client/src/pages/user/index.activity.vue  |   6 +-
 .../client/src/pages/user/index.photos.vue    |  10 +-
 packages/client/src/pages/user/index.vue      |  43 +--
 packages/client/src/pages/verify-email.vue    |   6 +-
 .../client/src/pages/welcome.entrance.a.vue   |  22 +-
 packages/client/src/pages/welcome.setup.vue   |  18 +-
 packages/client/src/pages/welcome.vue         |  10 +-
 packages/client/src/ui/_common_/navbar.vue    |   8 +-
 .../src/ui/_common_/statusbar-federation.vue  |   4 +-
 .../client/src/ui/_common_/statusbar-rss.vue  |   4 +-
 .../src/ui/_common_/statusbar-user-list.vue   |   4 +-
 .../src/ui/_common_/stream-indicator.vue      |   8 +-
 packages/client/src/ui/deck.vue               |   4 +-
 .../client/src/ui/deck/antenna-column.vue     |   4 +-
 .../client/src/ui/deck/channel-column.vue     |   4 +-
 packages/client/src/ui/deck/column.vue        |  46 ++-
 packages/client/src/ui/deck/list-column.vue   |   4 +-
 packages/client/src/ui/deck/main-column.vue   |   6 +-
 packages/client/src/ui/deck/tl-column.vue     |  24 +-
 .../client/src/ui/deck/widgets-column.vue     |   6 +-
 packages/client/src/ui/universal.vue          |  24 +-
 packages/client/src/ui/universal.widgets.vue  |   8 +-
 packages/client/src/ui/visitor/b.vue          |  31 +-
 packages/client/src/ui/zen.vue                |  10 +-
 .../client/src/widgets/activity.chart.vue     |  60 +--
 packages/client/src/widgets/clock.vue         |  14 +-
 packages/client/src/widgets/digital-clock.vue |  14 +-
 .../client/src/widgets/instance-cloud.vue     |  10 +-
 packages/client/src/widgets/rss-ticker.vue    |   4 +-
 .../src/widgets/server-metric/cpu-mem.vue     |  78 ++--
 .../client/src/widgets/server-metric/cpu.vue  |   6 +-
 .../client/src/widgets/server-metric/disk.vue |  10 +-
 .../src/widgets/server-metric/meilisearch.vue |  22 +-
 .../client/src/widgets/server-metric/mem.vue  |  18 +-
 .../client/src/widgets/server-metric/net.vue  |  81 +++--
 .../client/src/widgets/server-metric/pie.vue  |   6 +-
 packages/client/src/widgets/user-list.vue     |  18 +-
 247 files changed, 3327 insertions(+), 3021 deletions(-)

diff --git a/packages/client/src/components/MkAbuseReport.vue b/packages/client/src/components/MkAbuseReport.vue
index b1029fac04..5536523948 100644
--- a/packages/client/src/components/MkAbuseReport.vue
+++ b/packages/client/src/components/MkAbuseReport.vue
@@ -65,6 +65,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import MkButton from "@/components/MkButton.vue";
 import MkSwitch from "@/components/form/switch.vue";
 import MkKeyValue from "@/components/MkKeyValue.vue";
@@ -79,11 +81,11 @@ const emit = defineEmits<{
 	(ev: "resolved", reportId: string): void;
 }>();
 
-const forward = $ref(props.report.forwarded);
+const forward = ref(props.report.forwarded);
 
 function resolve() {
 	os.apiWithDialog("admin/resolve-abuse-user-report", {
-		forward,
+		forward: forward.value,
 		reportId: props.report.id,
 	}).then(() => {
 		emit("resolved", props.report.id);
diff --git a/packages/client/src/components/MkAnalogClock.vue b/packages/client/src/components/MkAnalogClock.vue
index c745e4083e..17cab18da2 100644
--- a/packages/client/src/components/MkAnalogClock.vue
+++ b/packages/client/src/components/MkAnalogClock.vue
@@ -108,7 +108,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import tinycolor from "tinycolor2";
 import { globalEvents } from "@/events.js";
 
@@ -167,19 +167,19 @@ const texts = computed(() => {
 });
 
 let enabled = true,
-	majorGraduationColor = $ref<string>(),
+	majorGraduationColor = ref<string>(),
 	// let minorGraduationColor = $ref<string>();
-	sHandColor = $ref<string>(),
-	mHandColor = $ref<string>(),
-	hHandColor = $ref<string>(),
-	nowColor = $ref<string>(),
-	h = $ref<number>(0),
-	m = $ref<number>(0),
-	s = $ref<number>(0),
-	hAngle = $ref<number>(0),
-	mAngle = $ref<number>(0),
-	sAngle = $ref<number>(0),
-	disableSAnimate = $ref(false),
+	sHandColor = ref<string>(),
+	mHandColor = ref<string>(),
+	hHandColor = ref<string>(),
+	nowColor = ref<string>(),
+	h = ref<number>(0),
+	m = ref<number>(0),
+	s = ref<number>(0),
+	hAngle = ref<number>(0),
+	mAngle = ref<number>(0),
+	sAngle = ref<number>(0),
+	disableSAnimate = ref(false),
 	sOneRound = false;
 
 function tick() {
@@ -187,29 +187,31 @@ function tick() {
 	now.setMinutes(
 		now.getMinutes() + (new Date().getTimezoneOffset() + props.offset),
 	);
-	s = now.getSeconds();
-	m = now.getMinutes();
-	h = now.getHours();
-	hAngle =
-		(Math.PI * ((h % (props.twentyfour ? 24 : 12)) + (m + s / 60) / 60)) /
+	s.value = now.getSeconds();
+	m.value = now.getMinutes();
+	h.value = now.getHours();
+	hAngle.value =
+		(Math.PI *
+			((h.value % (props.twentyfour ? 24 : 12)) +
+				(m.value + s.value / 60) / 60)) /
 		(props.twentyfour ? 12 : 6);
-	mAngle = (Math.PI * (m + s / 60)) / 30;
+	mAngle.value = (Math.PI * (m.value + s.value / 60)) / 30;
 	if (sOneRound) {
 		// 秒針が一周した際のアニメーションをよしなに処理する(これが無いと秒が59->0になったときに期待したアニメーションにならない)
-		sAngle = (Math.PI * 60) / 30;
+		sAngle.value = (Math.PI * 60) / 30;
 		window.setTimeout(() => {
-			disableSAnimate = true;
+			disableSAnimate.value = true;
 			window.setTimeout(() => {
-				sAngle = 0;
+				sAngle.value = 0;
 				window.setTimeout(() => {
-					disableSAnimate = false;
+					disableSAnimate.value = false;
 				}, 100);
 			}, 100);
 		}, 700);
 	} else {
-		sAngle = (Math.PI * s) / 30;
+		sAngle.value = (Math.PI * s.value) / 30;
 	}
-	sOneRound = s === 59;
+	sOneRound = s.value === 59;
 }
 
 tick();
@@ -220,16 +222,16 @@ function calcColors() {
 	const accent = tinycolor(
 		computedStyle.getPropertyValue("--accent"),
 	).toHexString();
-	majorGraduationColor = dark
+	majorGraduationColor.value = dark
 		? "rgba(255, 255, 255, 0.3)"
 		: "rgba(0, 0, 0, 0.3)";
 	// minorGraduationColor = dark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
-	sHandColor = dark ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.3)";
-	mHandColor = tinycolor(
+	sHandColor.value = dark ? "rgba(255, 255, 255, 0.5)" : "rgba(0, 0, 0, 0.3)";
+	mHandColor.value = tinycolor(
 		computedStyle.getPropertyValue("--fg"),
 	).toHexString();
-	hHandColor = accent;
-	nowColor = accent;
+	hHandColor.value = accent;
+	nowColor.value = accent;
 }
 
 calcColors();
diff --git a/packages/client/src/components/MkButton.vue b/packages/client/src/components/MkButton.vue
index 3a6b8f321a..53f20d3d4c 100644
--- a/packages/client/src/components/MkButton.vue
+++ b/packages/client/src/components/MkButton.vue
@@ -27,7 +27,7 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted } from "vue";
+import { nextTick, onMounted, ref } from "vue";
 
 const props = defineProps<{
 	type?: "button" | "submit" | "reset";
@@ -49,13 +49,13 @@ const emit = defineEmits<{
 	(ev: "click", payload: MouseEvent): void;
 }>();
 
-const el = $ref<HTMLElement | null>(null);
-const ripples = $ref<HTMLElement | null>(null);
+const el = ref<HTMLElement | null>(null);
+const ripples = ref<HTMLElement | null>(null);
 
 onMounted(() => {
 	if (props.autofocus) {
 		nextTick(() => {
-			el!.focus();
+			el.value!.focus();
 		});
 	}
 });
@@ -81,7 +81,7 @@ function onMousedown(evt: MouseEvent): void {
 	ripple.style.top = (evt.clientY - rect.top - 1).toString() + "px";
 	ripple.style.left = (evt.clientX - rect.left - 1).toString() + "px";
 
-	ripples!.appendChild(ripple);
+	ripples.value!.appendChild(ripple);
 
 	const circleCenterX = evt.clientX - rect.left;
 	const circleCenterY = evt.clientY - rect.top;
@@ -101,7 +101,7 @@ function onMousedown(evt: MouseEvent): void {
 		ripple.style.opacity = "0";
 	}, 1000);
 	window.setTimeout(() => {
-		if (ripples) ripples.removeChild(ripple);
+		if (ripples.value) ripples.value.removeChild(ripple);
 	}, 2000);
 }
 </script>
diff --git a/packages/client/src/components/MkCheatSheetDialog.vue b/packages/client/src/components/MkCheatSheetDialog.vue
index 753d1001ef..1176ffcdcc 100644
--- a/packages/client/src/components/MkCheatSheetDialog.vue
+++ b/packages/client/src/components/MkCheatSheetDialog.vue
@@ -11,6 +11,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import XModalWindow from "@/components/MkModalWindow.vue";
 import XCheatSheet from "@/pages/mfm-cheat-sheet.vue";
 import { i18n } from "@/i18n";
@@ -20,7 +22,7 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-const dialog = $ref<InstanceType<typeof XModalWindow>>();
+const dialog = ref<InstanceType<typeof XModalWindow>>();
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/MkContextMenu.vue b/packages/client/src/components/MkContextMenu.vue
index f94c2e3179..22920270bc 100644
--- a/packages/client/src/components/MkContextMenu.vue
+++ b/packages/client/src/components/MkContextMenu.vue
@@ -12,7 +12,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted } from "vue";
+import { onBeforeUnmount, onMounted, ref } from "vue";
 import MkMenu from "@/components/MkMenu.vue";
 import type { MenuItem } from "@/types/menu";
 import contains from "@/scripts/contains";
@@ -27,16 +27,16 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-const rootEl = $ref<HTMLDivElement>();
+const rootEl = ref<HTMLDivElement>();
 
-const zIndex = $ref<number>(os.claimZIndex("high"));
+const zIndex = ref<number>(os.claimZIndex("high"));
 
 onMounted(() => {
 	let left = props.ev.pageX + 1, // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
 		top = props.ev.pageY + 1; // 間違って右ダブルクリックした場合に意図せずアイテムがクリックされるのを防ぐため + 1
 
-	const width = rootEl.offsetWidth;
-	const height = rootEl.offsetHeight;
+	const width = rootEl.value.offsetWidth;
+	const height = rootEl.value.offsetHeight;
 
 	if (left + width - window.pageXOffset > window.innerWidth) {
 		left = window.innerWidth - width + window.pageXOffset;
@@ -54,8 +54,8 @@ onMounted(() => {
 		left = 0;
 	}
 
-	rootEl.style.top = `${top}px`;
-	rootEl.style.left = `${left}px`;
+	rootEl.value.style.top = `${top}px`;
+	rootEl.value.style.left = `${left}px`;
 
 	document.body.addEventListener("mousedown", onMousedown);
 });
@@ -65,7 +65,8 @@ onBeforeUnmount(() => {
 });
 
 function onMousedown(evt: Event) {
-	if (!contains(rootEl, evt.target) && rootEl !== evt.target) emit("closed");
+	if (!contains(rootEl.value, evt.target) && rootEl.value !== evt.target)
+		emit("closed");
 }
 </script>
 
diff --git a/packages/client/src/components/MkCropperDialog.vue b/packages/client/src/components/MkCropperDialog.vue
index 7a3acb187e..6febec9f11 100644
--- a/packages/client/src/components/MkCropperDialog.vue
+++ b/packages/client/src/components/MkCropperDialog.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import type * as misskey from "firefish-js";
 import Cropper from "cropperjs";
 import tinycolor from "tinycolor2";
@@ -62,10 +62,10 @@ const props = defineProps<{
 const imgUrl = `${url}/proxy/image.webp?${query({
 	url: props.file.url,
 })}`;
-const dialogEl = $ref<InstanceType<typeof XModalWindow>>();
-const imgEl = $ref<HTMLImageElement>();
+const dialogEl = ref<InstanceType<typeof XModalWindow>>();
+const imgEl = ref<HTMLImageElement>();
 let cropper: Cropper | null = null,
-	loading = $ref(true);
+	loading = ref(true);
 
 const ok = async () => {
 	const promise = new Promise<misskey.entities.DriveFile>(async (res) => {
@@ -96,16 +96,16 @@ const ok = async () => {
 	const f = await promise;
 
 	emit("ok", f);
-	dialogEl.close();
+	dialogEl.value.close();
 };
 
 const cancel = () => {
 	emit("cancel");
-	dialogEl.close();
+	dialogEl.value.close();
 };
 
 const onImageLoad = () => {
-	loading = false;
+	loading.value = false;
 
 	if (cropper) {
 		cropper.getCropperImage()!.$center("contain");
@@ -114,7 +114,7 @@ const onImageLoad = () => {
 };
 
 onMounted(() => {
-	cropper = new Cropper(imgEl, {});
+	cropper = new Cropper(imgEl.value, {});
 
 	const computedStyle = getComputedStyle(document.documentElement);
 
diff --git a/packages/client/src/components/MkDialog.vue b/packages/client/src/components/MkDialog.vue
index 9be70fa14a..3cfd332c7d 100644
--- a/packages/client/src/components/MkDialog.vue
+++ b/packages/client/src/components/MkDialog.vue
@@ -199,7 +199,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, ref, shallowRef } from "vue";
+import { onBeforeUnmount, onMounted, ref, shallowRef, computed } from "vue";
 import * as Acct from "firefish-js/built/acct";
 import MkModal from "@/components/MkModal.vue";
 import MkButton from "@/components/MkButton.vue";
@@ -281,17 +281,15 @@ const modal = shallowRef<InstanceType<typeof MkModal>>();
 const inputValue = ref<string | number | null>(props.input?.default ?? null);
 const selectedValue = ref(props.select?.default ?? null);
 
-let disabledReason = $ref<null | "charactersExceeded" | "charactersBelow">(
-	null,
-);
-const okButtonDisabled = $computed<boolean>(() => {
+let disabledReason = ref<null | "charactersExceeded" | "charactersBelow">(null);
+const okButtonDisabled = computed<boolean>(() => {
 	if (props.input) {
 		if (props.input.minLength) {
 			if (
 				(inputValue.value || inputValue.value === "") &&
 				(inputValue.value as string).length < props.input.minLength
 			) {
-				disabledReason = "charactersBelow";
+				disabledReason.value = "charactersBelow";
 				return true;
 			}
 		}
@@ -300,7 +298,7 @@ const okButtonDisabled = $computed<boolean>(() => {
 				inputValue.value &&
 				(inputValue.value as string).length > props.input.maxLength
 			) {
-				disabledReason = "charactersExceeded";
+				disabledReason.value = "charactersExceeded";
 				return true;
 			}
 		}
diff --git a/packages/client/src/components/MkFollowButton.vue b/packages/client/src/components/MkFollowButton.vue
index 5fe8d6afb1..6f003b320b 100644
--- a/packages/client/src/components/MkFollowButton.vue
+++ b/packages/client/src/components/MkFollowButton.vue
@@ -61,7 +61,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onBeforeUnmount, onMounted } from "vue";
+import { computed, onBeforeUnmount, onMounted, ref } from "vue";
 import type * as Misskey from "firefish-js";
 import * as os from "@/os";
 import { stream } from "@/stream";
@@ -88,13 +88,13 @@ const props = withDefaults(
 
 const isBlocking = computed(() => props.user.isBlocking);
 
-let state = $ref(i18n.ts.processing);
+let state = ref(i18n.ts.processing);
 
-let isFollowing = $ref(props.user.isFollowing);
-let hasPendingFollowRequestFromYou = $ref(
+let isFollowing = ref(props.user.isFollowing);
+let hasPendingFollowRequestFromYou = ref(
 	props.user.hasPendingFollowRequestFromYou,
 );
-let wait = $ref(false);
+let wait = ref(false);
 const connection = stream.useChannel("main");
 
 if (props.user.isFollowing == null) {
@@ -105,13 +105,14 @@ if (props.user.isFollowing == null) {
 
 function onFollowChange(user: Misskey.entities.UserDetailed) {
 	if (user.id === props.user.id) {
-		isFollowing = user.isFollowing;
-		hasPendingFollowRequestFromYou = user.hasPendingFollowRequestFromYou;
+		isFollowing.value = user.isFollowing;
+		hasPendingFollowRequestFromYou.value =
+			user.hasPendingFollowRequestFromYou;
 	}
 }
 
 async function onClick() {
-	wait = true;
+	wait.value = true;
 
 	try {
 		if (isBlocking.value) {
@@ -130,7 +131,7 @@ async function onClick() {
 				});
 			}
 			emit("refresh");
-		} else if (isFollowing) {
+		} else if (isFollowing.value) {
 			const { canceled } = await os.confirm({
 				type: "warning",
 				text: i18n.t("unfollowConfirm", {
@@ -144,22 +145,22 @@ async function onClick() {
 				userId: props.user.id,
 			});
 		} else {
-			if (hasPendingFollowRequestFromYou) {
+			if (hasPendingFollowRequestFromYou.value) {
 				await os.api("following/requests/cancel", {
 					userId: props.user.id,
 				});
-				hasPendingFollowRequestFromYou = false;
+				hasPendingFollowRequestFromYou.value = false;
 			} else {
 				await os.api("following/create", {
 					userId: props.user.id,
 				});
-				hasPendingFollowRequestFromYou = true;
+				hasPendingFollowRequestFromYou.value = true;
 			}
 		}
 	} catch (err) {
 		console.error(err);
 	} finally {
-		wait = false;
+		wait.value = false;
 	}
 }
 
diff --git a/packages/client/src/components/MkForgotPassword.vue b/packages/client/src/components/MkForgotPassword.vue
index 07f0866011..e4898fabaf 100644
--- a/packages/client/src/components/MkForgotPassword.vue
+++ b/packages/client/src/components/MkForgotPassword.vue
@@ -62,6 +62,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import {} from "vue";
 import XModalWindow from "@/components/MkModalWindow.vue";
 import MkButton from "@/components/MkButton.vue";
@@ -75,20 +77,20 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-let dialog: InstanceType<typeof XModalWindow> = $ref();
+let dialog: InstanceType<typeof XModalWindow> = ref();
 
-let username = $ref("");
-let email = $ref("");
-let processing = $ref(false);
+let username = ref("");
+let email = ref("");
+let processing = ref(false);
 
 async function onSubmit() {
-	processing = true;
+	processing.value = true;
 	await os.apiWithDialog("request-reset-password", {
-		username,
-		email,
+		username: username.value,
+		email: email.value,
 	});
 	emit("done");
-	dialog.close();
+	dialog.value.close();
 }
 </script>
 
diff --git a/packages/client/src/components/MkHeatmap.vue b/packages/client/src/components/MkHeatmap.vue
index 8921ef3bc5..b3592b6e03 100644
--- a/packages/client/src/components/MkHeatmap.vue
+++ b/packages/client/src/components/MkHeatmap.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, nextTick, watch } from "vue";
+import { onMounted, nextTick, watch, shallowRef, ref } from "vue";
 import { Chart } from "chart.js";
 import * as os from "@/os";
 import { defaultStore } from "@/store";
@@ -23,11 +23,11 @@ const props = defineProps<{
 	src: string;
 }>();
 
-const rootEl = $shallowRef<HTMLDivElement>(null);
-const chartEl = $shallowRef<HTMLCanvasElement>(null);
+const rootEl = shallowRef<HTMLDivElement>(null);
+const chartEl = shallowRef<HTMLCanvasElement>(null);
 const now = new Date();
 let chartInstance: Chart = null;
-let fetching = $ref(true);
+let fetching = ref(true);
 
 const { handler: externalTooltipHandler } = useChartTooltip({
 	position: "middle",
@@ -43,8 +43,8 @@ async function renderChart() {
 		chartInstance.destroy();
 	}
 
-	const wide = rootEl.offsetWidth > 700;
-	const narrow = rootEl.offsetWidth < 400;
+	const wide = rootEl.value.offsetWidth > 700;
+	const narrow = rootEl.value.offsetWidth < 400;
 
 	const weeks = wide ? 50 : narrow ? 10 : 25;
 	const chartLimit = 7 * weeks;
@@ -113,7 +113,7 @@ async function renderChart() {
 		values = addArrays(raw.diffs.normal, raw.diffs.reply, raw.diffs.renote);
 	}
 
-	fetching = false;
+	fetching.value = false;
 
 	await nextTick();
 
@@ -131,7 +131,7 @@ async function renderChart() {
 
 	const marginEachCell = 4;
 
-	chartInstance = new Chart(chartEl, {
+	chartInstance = new Chart(chartEl.value, {
 		type: "matrix",
 		data: {
 			datasets: [
@@ -247,7 +247,7 @@ async function renderChart() {
 watch(
 	() => props.src,
 	() => {
-		fetching = true;
+		fetching.value = true;
 		renderChart();
 	},
 );
diff --git a/packages/client/src/components/MkImageViewer.vue b/packages/client/src/components/MkImageViewer.vue
index cbb916a620..90db31a8d3 100644
--- a/packages/client/src/components/MkImageViewer.vue
+++ b/packages/client/src/components/MkImageViewer.vue
@@ -26,6 +26,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import {} from "vue";
 import type * as misskey from "firefish-js";
 import bytes from "@/filters/bytes";
@@ -43,7 +45,7 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-const modal = $ref<InstanceType<typeof MkModal>>();
+const modal = ref<InstanceType<typeof MkModal>>();
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/MkImgWithBlurhash.vue b/packages/client/src/components/MkImgWithBlurhash.vue
index fb7074a185..c436fcd32f 100644
--- a/packages/client/src/components/MkImgWithBlurhash.vue
+++ b/packages/client/src/components/MkImgWithBlurhash.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import { decodeBlurHash } from "fast-blurhash";
 
 const props = withDefaults(
@@ -48,20 +48,20 @@ const props = withDefaults(
 	},
 );
 
-const canvas = $ref<HTMLCanvasElement>();
-let loaded = $ref(false);
+const canvas = ref<HTMLCanvasElement>();
+let loaded = ref(false);
 
 function draw() {
-	if (props.hash == null || canvas == null) return;
+	if (props.hash == null || canvas.value == null) return;
 	const pixels = decodeBlurHash(props.hash, props.size, props.size);
-	const ctx = canvas.getContext("2d");
+	const ctx = canvas.value.getContext("2d");
 	const imageData = ctx!.createImageData(props.size, props.size);
 	imageData.data.set(pixels);
 	ctx!.putImageData(imageData, 0, 0);
 }
 
 function onLoad() {
-	loaded = true;
+	loaded.value = true;
 }
 
 onMounted(() => {
diff --git a/packages/client/src/components/MkInstanceCardMini.vue b/packages/client/src/components/MkInstanceCardMini.vue
index 13ab9a50fe..c774efcdc6 100644
--- a/packages/client/src/components/MkInstanceCardMini.vue
+++ b/packages/client/src/components/MkInstanceCardMini.vue
@@ -24,6 +24,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import * as firefish from "firefish-js";
 import MkMiniChart from "@/components/MkMiniChart.vue";
 import * as os from "@/os";
@@ -33,7 +35,7 @@ const props = defineProps<{
 	instance: firefish.entities.Instance;
 }>();
 
-let chartValues = $ref<number[] | null>(null);
+let chartValues = ref<number[] | null>(null);
 
 os.apiGet("charts/instance", {
 	host: props.instance.host,
@@ -42,7 +44,7 @@ os.apiGet("charts/instance", {
 }).then((res) => {
 	// 今日のぶんの値はまだ途中の値であり、それも含めると大抵の場合前日よりも下降しているようなグラフになってしまうため今日は弾く
 	res.requests.received.splice(0, 1);
-	chartValues = res.requests.received;
+	chartValues.value = res.requests.received;
 });
 
 function getInstanceIcon(instance): string {
diff --git a/packages/client/src/components/MkInstanceSelectDialog.vue b/packages/client/src/components/MkInstanceSelectDialog.vue
index 3e2723dcc1..312b656ba4 100644
--- a/packages/client/src/components/MkInstanceSelectDialog.vue
+++ b/packages/client/src/components/MkInstanceSelectDialog.vue
@@ -56,6 +56,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import MkInput from "@/components/form/input.vue";
 import XModalWindow from "@/components/MkModalWindow.vue";
 import * as os from "@/os";
@@ -68,28 +70,28 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-let hostname = $ref("");
-let instances: Instance[] = $ref([]);
-let selected: Instance | null = $ref(null);
-let dialogEl = $ref<InstanceType<typeof XModalWindow>>();
+let hostname = ref("");
+let instances: Instance[] = ref([]);
+let selected: Instance | null = ref(null);
+let dialogEl = ref<InstanceType<typeof XModalWindow>>();
 
 let searchOrderLatch = 0;
 const search = () => {
-	if (hostname === "") {
-		instances = [];
+	if (hostname.value === "") {
+		instances.value = [];
 		return;
 	}
 
 	const searchId = ++searchOrderLatch;
 	os.api("federation/instances", {
-		host: hostname,
+		host: hostname.value,
 		limit: 10,
 		blocked: false,
 		suspended: false,
 		sort: "+pubSub",
 	}).then((_instances) => {
 		if (searchId !== searchOrderLatch) return;
-		instances = _instances.map(
+		instances.value = _instances.map(
 			(x) =>
 				({
 					id: x.id,
@@ -101,14 +103,14 @@ const search = () => {
 };
 
 const ok = () => {
-	if (selected == null) return;
-	emit("ok", selected);
-	dialogEl?.close();
+	if (selected.value == null) return;
+	emit("ok", selected.value);
+	dialogEl.value?.close();
 };
 
 const cancel = () => {
 	emit("cancel");
-	dialogEl?.close();
+	dialogEl.value?.close();
 };
 </script>
 
diff --git a/packages/client/src/components/MkInstanceStats.vue b/packages/client/src/components/MkInstanceStats.vue
index c2a5071730..516264e3a4 100644
--- a/packages/client/src/components/MkInstanceStats.vue
+++ b/packages/client/src/components/MkInstanceStats.vue
@@ -102,7 +102,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from "vue";
+import { onMounted, ref, shallowRef } from "vue";
 import { Chart } from "chart.js";
 import MkSelect from "@/components/form/select.vue";
 import MkChart from "@/components/MkChart.vue";
@@ -116,11 +116,11 @@ import { initChart } from "@/scripts/init-chart";
 initChart();
 
 const chartLimit = 500;
-let chartSpan = $ref<"hour" | "day">("hour");
-let chartSrc = $ref("active-users");
-let heatmapSrc = $ref("active-users");
-let subDoughnutEl = $shallowRef<HTMLCanvasElement>();
-let pubDoughnutEl = $shallowRef<HTMLCanvasElement>();
+let chartSpan = ref<"hour" | "day">("hour");
+let chartSrc = ref("active-users");
+let heatmapSrc = ref("active-users");
+let subDoughnutEl = shallowRef<HTMLCanvasElement>();
+let pubDoughnutEl = shallowRef<HTMLCanvasElement>();
 
 const { handler: externalTooltipHandler1 } = useChartTooltip({
 	position: "middle",
@@ -189,7 +189,7 @@ function createDoughnut(chartEl, tooltip, data) {
 onMounted(() => {
 	os.apiGet("federation/stats", { limit: 30 }).then((fedStats) => {
 		createDoughnut(
-			subDoughnutEl,
+			subDoughnutEl.value,
 			externalTooltipHandler1,
 			fedStats.topSubInstances
 				.map((x) => ({
@@ -210,7 +210,7 @@ onMounted(() => {
 		);
 
 		createDoughnut(
-			pubDoughnutEl,
+			pubDoughnutEl.value,
 			externalTooltipHandler2,
 			fedStats.topPubInstances
 				.map((x) => ({
diff --git a/packages/client/src/components/MkInstanceTicker.vue b/packages/client/src/components/MkInstanceTicker.vue
index 8563ae4f01..8043f4e6c6 100644
--- a/packages/client/src/components/MkInstanceTicker.vue
+++ b/packages/client/src/components/MkInstanceTicker.vue
@@ -11,6 +11,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import { instanceName } from "@/config";
 import { instance as Instance } from "@/instance";
 import { getProxiedImageUrlNullable } from "@/scripts/media-proxy";
@@ -24,7 +26,7 @@ const props = defineProps<{
 	};
 }>();
 
-let ticker = $ref<HTMLElement | null>(null);
+let ticker = ref<HTMLElement | null>(null);
 
 // if no instance data is given, this is for the local instance
 const instance = props.instance ?? {
diff --git a/packages/client/src/components/MkLaunchPad.vue b/packages/client/src/components/MkLaunchPad.vue
index ebb3109260..e63fb8fad5 100644
--- a/packages/client/src/components/MkLaunchPad.vue
+++ b/packages/client/src/components/MkLaunchPad.vue
@@ -62,6 +62,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import MkModal from "@/components/MkModal.vue";
 import { navbarItemDef } from "@/navbar";
 import { defaultStore } from "@/store";
@@ -89,7 +91,7 @@ const preferedModalType =
 		? "drawer"
 		: "dialog";
 
-const modal = $ref<InstanceType<typeof MkModal>>();
+const modal = ref<InstanceType<typeof MkModal>>();
 
 const menu = defaultStore.state.menu;
 
@@ -107,7 +109,7 @@ const items = Object.keys(navbarItemDef)
 	}));
 
 function close() {
-	modal.close();
+	modal.value.close();
 }
 </script>
 
diff --git a/packages/client/src/components/MkLink.vue b/packages/client/src/components/MkLink.vue
index 9e1e482155..f585517179 100644
--- a/packages/client/src/components/MkLink.vue
+++ b/packages/client/src/components/MkLink.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from "vue";
+import { defineAsyncComponent, ref } from "vue";
 import { url as local } from "@/config";
 import { useTooltip } from "@/scripts/use-tooltip";
 import * as os from "@/os";
@@ -35,9 +35,9 @@ const self = props.url.startsWith(local);
 const attr = self ? "to" : "href";
 const target = self ? null : "_blank";
 
-const el = $ref();
+const el = ref();
 
-useTooltip($$(el), (showing) => {
+useTooltip(el, (showing) => {
 	os.popup(
 		defineAsyncComponent(
 			() => import("@/components/MkUrlPreviewPopup.vue"),
@@ -45,7 +45,7 @@ useTooltip($$(el), (showing) => {
 		{
 			showing,
 			url: props.url,
-			source: el,
+			source: el.value,
 		},
 		{},
 		"closed",
diff --git a/packages/client/src/components/MkMedia.vue b/packages/client/src/components/MkMedia.vue
index bbacc669d5..0539ed44f2 100644
--- a/packages/client/src/components/MkMedia.vue
+++ b/packages/client/src/components/MkMedia.vue
@@ -104,7 +104,7 @@ const props = defineProps<{
 	raw?: boolean;
 }>();
 
-let hide = $ref(true);
+let hide = ref(true);
 
 const plyr = ref();
 
@@ -145,7 +145,7 @@ function captionPopup() {
 watch(
 	() => props.media,
 	() => {
-		hide =
+		hide.value =
 			defaultStore.state.nsfw === "force"
 				? true
 				: props.media.isSensitive &&
diff --git a/packages/client/src/components/MkMediaBanner.vue b/packages/client/src/components/MkMediaBanner.vue
index 590248308f..bcf2b83055 100644
--- a/packages/client/src/components/MkMediaBanner.vue
+++ b/packages/client/src/components/MkMediaBanner.vue
@@ -56,7 +56,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import VuePlyr from "vue-plyr";
 import type * as misskey from "firefish-js";
 import { ColdDeviceStorage } from "@/store";
@@ -70,15 +70,17 @@ const props = withDefaults(
 	{},
 );
 
-const audioEl = $ref<HTMLAudioElement | null>();
-let hide = $ref(true);
+const audioEl = ref<HTMLAudioElement | null>();
+let hide = ref(true);
 
 function volumechange() {
-	if (audioEl) ColdDeviceStorage.set("mediaVolume", audioEl.volume);
+	if (audioEl.value)
+		ColdDeviceStorage.set("mediaVolume", audioEl.value.volume);
 }
 
 onMounted(() => {
-	if (audioEl) audioEl.volume = ColdDeviceStorage.get("mediaVolume");
+	if (audioEl.value)
+		audioEl.value.volume = ColdDeviceStorage.get("mediaVolume");
 });
 </script>
 
diff --git a/packages/client/src/components/MkMenu.vue b/packages/client/src/components/MkMenu.vue
index d0eaa8def8..95370eebd5 100644
--- a/packages/client/src/components/MkMenu.vue
+++ b/packages/client/src/components/MkMenu.vue
@@ -233,13 +233,13 @@ const emit = defineEmits<{
 	(ev: "close", actioned?: boolean): void;
 }>();
 
-let itemsEl = $ref<HTMLDivElement>();
+let itemsEl = ref<HTMLDivElement>();
 
-let items2: InnerMenuItem[] = $ref([]);
+let items2: InnerMenuItem[] = ref([]);
 
-let child = $ref<InstanceType<typeof XChild>>();
+let child = ref<InstanceType<typeof XChild>>();
 
-let childShowingItem = $ref<MenuItem | null>();
+let childShowingItem = ref<MenuItem | null>();
 
 watch(
 	() => props.items,
@@ -255,24 +255,24 @@ watch(
 				// if item is Promise
 				items[i] = { type: "pending" };
 				item.then((actualItem) => {
-					items2[i] = actualItem;
+					items2.value[i] = actualItem;
 				});
 			}
 		}
 
-		items2 = items as InnerMenuItem[];
+		items2.value = items as InnerMenuItem[];
 	},
 	{
 		immediate: true,
 	},
 );
 
-let childMenu = $ref<MenuItem[] | null>();
-let childTarget = $ref<HTMLElement | null>();
+let childMenu = ref<MenuItem[] | null>();
+let childTarget = ref<HTMLElement | null>();
 
 function closeChild() {
-	childMenu = null;
-	childShowingItem = null;
+	childMenu.value = null;
+	childShowingItem.value = null;
 }
 
 function childActioned() {
@@ -282,11 +282,12 @@ function childActioned() {
 
 function onGlobalMousedown(event: MouseEvent) {
 	if (
-		childTarget &&
-		(event.target === childTarget || childTarget.contains(event.target))
+		childTarget.value &&
+		(event.target === childTarget.value ||
+			childTarget.value.contains(event.target))
 	)
 		return;
-	if (child && child.checkHit(event)) return;
+	if (child.value && child.value.checkHit(event)) return;
 	closeChild();
 }
 
@@ -305,9 +306,9 @@ async function showChildren(item: MenuItem, ev: MouseEvent) {
 		os.popupMenu(item.children, ev.currentTarget ?? ev.target);
 		close();
 	} else {
-		childTarget = ev.currentTarget ?? ev.target;
-		childMenu = item.children;
-		childShowingItem = item;
+		childTarget.value = ev.currentTarget ?? ev.target;
+		childMenu.value = item.children;
+		childShowingItem.value = item;
 	}
 }
 
diff --git a/packages/client/src/components/MkMiniChart.vue b/packages/client/src/components/MkMiniChart.vue
index bf23b8e0ed..8c604e5fc6 100644
--- a/packages/client/src/components/MkMiniChart.vue
+++ b/packages/client/src/components/MkMiniChart.vue
@@ -25,7 +25,7 @@
 </template>
 
 <script lang="ts" setup>
-import { watch } from "vue";
+import { watch, ref } from "vue";
 import { v4 as uuid } from "uuid";
 import tinycolor from "tinycolor2";
 import { useInterval } from "@/scripts/use-interval";
@@ -37,10 +37,10 @@ const props = defineProps<{
 const viewBoxX = 50;
 const viewBoxY = 50;
 const gradientId = uuid();
-let polylinePoints = $ref("");
-let polygonPoints = $ref("");
-let headX = $ref<number | null>(null);
-let headY = $ref<number | null>(null);
+let polylinePoints = ref("");
+let polygonPoints = ref("");
+let headX = ref<number | null>(null);
+let headY = ref<number | null>(null);
 const accent = tinycolor(
 	getComputedStyle(document.documentElement).getPropertyValue("--accent"),
 );
@@ -55,12 +55,14 @@ function draw(): void {
 		(1 - n / peak) * viewBoxY,
 	]);
 
-	polylinePoints = _polylinePoints.map((xy) => `${xy[0]},${xy[1]}`).join(" ");
+	polylinePoints.value = _polylinePoints
+		.map((xy) => `${xy[0]},${xy[1]}`)
+		.join(" ");
 
-	polygonPoints = `0,${viewBoxY} ${polylinePoints} ${viewBoxX},${viewBoxY}`;
+	polygonPoints.value = `0,${viewBoxY} ${polylinePoints.value} ${viewBoxX},${viewBoxY}`;
 
-	headX = _polylinePoints[_polylinePoints.length - 1][0];
-	headY = _polylinePoints[_polylinePoints.length - 1][1];
+	headX.value = _polylinePoints[_polylinePoints.length - 1][0];
+	headY.value = _polylinePoints[_polylinePoints.length - 1][1];
 }
 
 watch(() => props.src, draw, { immediate: true });
diff --git a/packages/client/src/components/MkModal.vue b/packages/client/src/components/MkModal.vue
index 2393d4396d..c7a12ecad6 100644
--- a/packages/client/src/components/MkModal.vue
+++ b/packages/client/src/components/MkModal.vue
@@ -77,7 +77,16 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, watch, provide, onUnmounted } from "vue";
+import {
+	nextTick,
+	onMounted,
+	watch,
+	provide,
+	onUnmounted,
+	ref,
+	shallowRef,
+	computed,
+} from "vue";
 import * as os from "@/os";
 import { isTouchUsing } from "@/scripts/touch";
 import { defaultStore } from "@/store";
@@ -130,14 +139,14 @@ const emit = defineEmits<{
 
 provide("modal", true);
 
-let maxHeight = $ref<number>();
-let fixed = $ref(false);
-let transformOrigin = $ref("center");
-let showing = $ref(true);
-let content = $shallowRef<HTMLElement>();
+let maxHeight = ref<number>();
+let fixed = ref(false);
+let transformOrigin = ref("center");
+let showing = ref(true);
+let content = shallowRef<HTMLElement>();
 const zIndex = os.claimZIndex(props.zPriority);
-let useSendAnime = $ref(false);
-const type = $computed<ModalTypes>(() => {
+let useSendAnime = ref(false);
+const type = computed<ModalTypes>(() => {
 	if (props.preferType === "auto") {
 		if (
 			!defaultStore.state.disableDrawer &&
@@ -152,28 +161,28 @@ const type = $computed<ModalTypes>(() => {
 		return props.preferType!;
 	}
 });
-const isEnableBgTransparent = $computed(
-	() => props.transparentBg && type === "popup",
+const isEnableBgTransparent = computed(
+	() => props.transparentBg && type.value === "popup",
 );
-let transitionName = $computed(() =>
+let transitionName = computed(() =>
 	defaultStore.state.animation
-		? useSendAnime
+		? useSendAnime.value
 			? "send"
-			: type === "drawer"
+			: type.value === "drawer"
 			? "modal-drawer"
-			: type === "popup"
+			: type.value === "popup"
 			? "modal-popup"
 			: "modal"
 		: "",
 );
-let transitionDuration = $computed(() =>
-	transitionName === "send"
+let transitionDuration = computed(() =>
+	transitionName.value === "send"
 		? 400
-		: transitionName === "modal-popup"
+		: transitionName.value === "modal-popup"
 		? 100
-		: transitionName === "modal"
+		: transitionName.value === "modal"
 		? 200
-		: transitionName === "modal-drawer"
+		: transitionName.value === "modal-drawer"
 		? 200
 		: 0,
 );
@@ -187,12 +196,12 @@ function close(ev, opts: { useSendAnimation?: boolean } = {}) {
 	// 	history.forward();
 	// }
 	if (opts.useSendAnimation) {
-		useSendAnime = true;
+		useSendAnime.value = true;
 	}
 
 	// eslint-disable-next-line vue/no-mutating-props
 	if (props.src) props.src.style.pointerEvents = "auto";
-	showing = false;
+	showing.value = false;
 	emit("close");
 	if (!props.noReturnFocus) {
 		focusedElement.focus();
@@ -204,8 +213,8 @@ function onBgClick() {
 	emit("click");
 }
 
-if (type === "drawer") {
-	maxHeight = window.innerHeight / 1.5;
+if (type.value === "drawer") {
+	maxHeight.value = window.innerHeight / 1.5;
 }
 
 const keymap = {
@@ -216,21 +225,21 @@ const MARGIN = 16;
 
 const align = () => {
 	if (props.src == null) return;
-	if (type === "drawer") return;
-	if (type === "dialog") return;
+	if (type.value === "drawer") return;
+	if (type.value === "dialog") return;
 
-	if (content == null) return;
+	if (content.value == null) return;
 
 	const srcRect = props.src.getBoundingClientRect();
 
-	const width = content!.offsetWidth;
-	const height = content!.offsetHeight;
+	const width = content.value!.offsetWidth;
+	const height = content.value!.offsetHeight;
 
 	let left;
 	let top;
 
-	const x = srcRect.left + (fixed ? 0 : window.pageXOffset);
-	const y = srcRect.top + (fixed ? 0 : window.pageYOffset);
+	const x = srcRect.left + (fixed.value ? 0 : window.pageXOffset);
+	const y = srcRect.top + (fixed.value ? 0 : window.pageYOffset);
 
 	if (props.anchor.x === "center") {
 		left = x + props.src.offsetWidth / 2 - width / 2;
@@ -248,7 +257,7 @@ const align = () => {
 		top = y + props.src.offsetHeight;
 	}
 
-	if (fixed) {
+	if (fixed.value) {
 		// 画面から横にはみ出る場合
 		if (left + width > window.innerWidth) {
 			left = window.innerWidth - width;
@@ -261,16 +270,16 @@ const align = () => {
 		if (top + height > window.innerHeight - MARGIN) {
 			if (props.noOverlap && props.anchor.x === "center") {
 				if (underSpace >= upperSpace / 3) {
-					maxHeight = underSpace;
+					maxHeight.value = underSpace;
 				} else {
-					maxHeight = upperSpace;
+					maxHeight.value = upperSpace;
 					top = upperSpace + MARGIN - height;
 				}
 			} else {
 				top = window.innerHeight - MARGIN - height;
 			}
 		} else {
-			maxHeight = underSpace;
+			maxHeight.value = underSpace;
 		}
 	} else {
 		// 画面から横にはみ出る場合
@@ -286,9 +295,9 @@ const align = () => {
 		if (top + height - window.scrollY > window.innerHeight - MARGIN) {
 			if (props.noOverlap && props.anchor.x === "center") {
 				if (underSpace >= upperSpace / 3) {
-					maxHeight = underSpace;
+					maxHeight.value = underSpace;
 				} else {
-					maxHeight = upperSpace;
+					maxHeight.value = upperSpace;
 					top = window.scrollY + (upperSpace + MARGIN - height);
 				}
 			} else {
@@ -300,7 +309,7 @@ const align = () => {
 					1;
 			}
 		} else {
-			maxHeight = underSpace;
+			maxHeight.value = underSpace;
 		}
 	}
 
@@ -317,36 +326,43 @@ const align = () => {
 
 	if (
 		top >=
-		srcRect.top + props.src.offsetHeight + (fixed ? 0 : window.pageYOffset)
+		srcRect.top +
+			props.src.offsetHeight +
+			(fixed.value ? 0 : window.pageYOffset)
 	) {
 		transformOriginY = "top";
-	} else if (top + height <= srcRect.top + (fixed ? 0 : window.pageYOffset)) {
+	} else if (
+		top + height <=
+		srcRect.top + (fixed.value ? 0 : window.pageYOffset)
+	) {
 		transformOriginY = "bottom";
 	}
 
 	if (
 		left >=
-		srcRect.left + props.src.offsetWidth + (fixed ? 0 : window.pageXOffset)
+		srcRect.left +
+			props.src.offsetWidth +
+			(fixed.value ? 0 : window.pageXOffset)
 	) {
 		transformOriginX = "left";
 	} else if (
 		left + width <=
-		srcRect.left + (fixed ? 0 : window.pageXOffset)
+		srcRect.left + (fixed.value ? 0 : window.pageXOffset)
 	) {
 		transformOriginX = "right";
 	}
 
-	transformOrigin = `${transformOriginX} ${transformOriginY}`;
+	transformOrigin.value = `${transformOriginX} ${transformOriginY}`;
 
-	content.style.left = left + "px";
-	content.style.top = top + "px";
+	content.value.style.left = left + "px";
+	content.value.style.top = top + "px";
 };
 
 const onOpened = () => {
 	emit("opened");
 
 	// モーダルコンテンツにマウスボタンが押され、コンテンツ外でマウスボタンが離されたときにモーダルバックグラウンドクリックと判定させないためにマウスイベントを監視しフラグ管理する
-	const el = content!.children[0];
+	const el = content.value!.children[0];
 	el.addEventListener(
 		"mousedown",
 		(ev) => {
@@ -378,7 +394,8 @@ onMounted(() => {
 				// eslint-disable-next-line vue/no-mutating-props
 				props.src.style.pointerEvents = "none";
 			}
-			fixed = type === "drawer" || getFixedContainer(props.src) != null;
+			fixed.value =
+				type.value === "drawer" || getFixedContainer(props.src) != null;
 
 			await nextTick();
 
@@ -390,7 +407,7 @@ onMounted(() => {
 	nextTick(() => {
 		new ResizeObserver((entries, observer) => {
 			align();
-		}).observe(content!);
+		}).observe(content.value!);
 	});
 });
 onUnmounted(() => {
diff --git a/packages/client/src/components/MkModalPageWindow.vue b/packages/client/src/components/MkModalPageWindow.vue
index a6d74edd16..811f3cad72 100644
--- a/packages/client/src/components/MkModalPageWindow.vue
+++ b/packages/client/src/components/MkModalPageWindow.vue
@@ -52,7 +52,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ComputedRef, provide } from "vue";
+import { ComputedRef, provide, ref, computed } from "vue";
 import MkModal from "@/components/MkModal.vue";
 import { popout as _popout } from "@/scripts/popout";
 import copyToClipboard from "@/scripts/copy-to-clipboard";
@@ -76,27 +76,27 @@ const router = new Router(routes, props.initialPath);
 
 router.addListener("push", (ctx) => {});
 
-let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
-let rootEl = $ref();
-let modal = $ref<InstanceType<typeof MkModal>>();
-let path = $ref(props.initialPath);
-let width = $ref(860);
-let height = $ref(660);
+let pageMetadata = ref<null | ComputedRef<PageMetadata>>();
+let rootEl = ref();
+let modal = ref<InstanceType<typeof MkModal>>();
+let path = ref(props.initialPath);
+let width = ref(860);
+let height = ref(660);
 const history = [];
 
 provide("router", router);
 provideMetadataReceiver((info) => {
-	pageMetadata = info;
+	pageMetadata.value = info;
 });
 provide("shouldOmitHeaderTitle", true);
 provide("shouldHeaderThin", true);
 
-const pageUrl = $computed(() => url + path);
-const contextmenu = $computed(() => {
+const pageUrl = computed(() => url + path.value);
+const contextmenu = computed(() => {
 	return [
 		{
 			type: "label",
-			text: path,
+			text: path.value,
 		},
 		{
 			icon: "ph-arrows-out-simple ph-bold ph-lg",
@@ -113,15 +113,15 @@ const contextmenu = $computed(() => {
 			icon: "ph-arrow-square-out ph-bold ph-lg",
 			text: i18n.ts.openInNewTab,
 			action: () => {
-				window.open(pageUrl, "_blank");
-				modal.close();
+				window.open(pageUrl.value, "_blank");
+				modal.value.close();
 			},
 		},
 		{
 			icon: "ph-link-simple ph-bold ph-lg",
 			text: i18n.ts.copyLink,
 			action: () => {
-				copyToClipboard(pageUrl);
+				copyToClipboard(pageUrl.value);
 			},
 		},
 	];
@@ -137,17 +137,17 @@ function back() {
 }
 
 function expand() {
-	mainRouter.push(path);
-	modal.close();
+	mainRouter.push(path.value);
+	modal.value.close();
 }
 
 function popout() {
-	_popout(path, rootEl);
-	modal.close();
+	_popout(path.value, rootEl.value);
+	modal.value.close();
 }
 
 function onContextmenu(ev: MouseEvent) {
-	os.contextMenu(contextmenu, ev);
+	os.contextMenu(contextmenu.value, ev);
 }
 </script>
 
diff --git a/packages/client/src/components/MkModalWindow.vue b/packages/client/src/components/MkModalWindow.vue
index 734f6a17c7..e0d1366a17 100644
--- a/packages/client/src/components/MkModalWindow.vue
+++ b/packages/client/src/components/MkModalWindow.vue
@@ -62,6 +62,8 @@
 </template>
 
 <script lang="ts" setup>
+import { shallowRef } from "vue";
+
 import { FocusTrap } from "focus-trap-vue";
 import MkModal from "./MkModal.vue";
 import { i18n } from "@/i18n";
@@ -90,12 +92,12 @@ const emit = defineEmits<{
 	(event: "ok"): void;
 }>();
 
-let modal = $shallowRef<InstanceType<typeof MkModal>>();
-let rootEl = $shallowRef<HTMLElement>();
-let headerEl = $shallowRef<HTMLElement>();
+let modal = shallowRef<InstanceType<typeof MkModal>>();
+let rootEl = shallowRef<HTMLElement>();
+let headerEl = shallowRef<HTMLElement>();
 
 const close = (ev) => {
-	modal?.close(ev);
+	modal.value?.close(ev);
 };
 
 const onBgClick = () => {
diff --git a/packages/client/src/components/MkNote.vue b/packages/client/src/components/MkNote.vue
index 2d54d0b564..b1c6114e1f 100644
--- a/packages/client/src/components/MkNote.vue
+++ b/packages/client/src/components/MkNote.vue
@@ -297,7 +297,7 @@ const props = defineProps<{
 
 const inChannel = inject("inChannel", null);
 
-let note = $ref(deepClone(props.note));
+let note = ref(deepClone(props.note));
 
 const softMuteReasonI18nSrc = (what?: string) => {
 	if (what === "note") return i18n.ts.userSaysSomethingReason;
@@ -312,19 +312,19 @@ const softMuteReasonI18nSrc = (what?: string) => {
 // plugin
 if (noteViewInterruptors.length > 0) {
 	onMounted(async () => {
-		let result = deepClone(note);
+		let result = deepClone(note.value);
 		for (const interruptor of noteViewInterruptors) {
 			result = await interruptor.handler(result);
 		}
-		note = result;
+		note.value = result;
 	});
 }
 
 const isRenote =
-	note.renote != null &&
-	note.text == null &&
-	note.fileIds.length === 0 &&
-	note.poll == null;
+	note.value.renote != null &&
+	note.value.text == null &&
+	note.value.fileIds.length === 0 &&
+	note.value.poll == null;
 
 const el = ref<HTMLElement>();
 const footerEl = ref<HTMLElement>();
@@ -333,13 +333,15 @@ const starButton = ref<InstanceType<typeof XStarButton>>();
 const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
 const renoteTime = ref<HTMLElement>();
 const reactButton = ref<HTMLElement>();
-let appearNote = $computed(() =>
-	isRenote ? (note.renote as misskey.entities.Note) : note,
+let appearNote = computed(() =>
+	isRenote ? (note.value.renote as misskey.entities.Note) : note.value,
 );
-const isMyRenote = $i && $i.id === note.userId;
+const isMyRenote = $i && $i.id === note.value.userId;
 const showContent = ref(false);
 const isDeleted = ref(false);
-const muted = ref(getWordSoftMute(note, $i, defaultStore.state.mutedWords));
+const muted = ref(
+	getWordSoftMute(note.value, $i, defaultStore.state.mutedWords),
+);
 const translation = ref(null);
 const translating = ref(false);
 const enableEmojiReactions = defaultStore.state.enableEmojiReactions;
@@ -358,7 +360,7 @@ const keymap = {
 
 useNoteCapture({
 	rootEl: el,
-	note: $$(appearNote),
+	note: appearNote,
 	isDeletedRef: isDeleted,
 });
 
@@ -366,7 +368,7 @@ function reply(viaKeyboard = false): void {
 	pleaseLogin();
 	os.post(
 		{
-			reply: appearNote,
+			reply: appearNote.value,
 			animation: !viaKeyboard,
 		},
 		() => {
@@ -382,7 +384,7 @@ function react(viaKeyboard = false): void {
 		reactButton.value,
 		(reaction) => {
 			os.api("notes/reactions/create", {
-				noteId: appearNote.id,
+				noteId: appearNote.value.id,
 				reaction: reaction,
 			});
 		},
@@ -425,21 +427,24 @@ function onContextmenu(ev: MouseEvent): void {
 			[
 				{
 					type: "label",
-					text: notePage(appearNote),
+					text: notePage(appearNote.value),
 				},
 				{
 					icon: "ph-browser ph-bold ph-lg",
 					text: i18n.ts.openInWindow,
 					action: () => {
-						os.pageWindow(notePage(appearNote));
+						os.pageWindow(notePage(appearNote.value));
 					},
 				},
-				notePage(appearNote) != location.pathname
+				notePage(appearNote.value) != location.pathname
 					? {
 							icon: "ph-arrows-out-simple ph-bold ph-lg",
 							text: i18n.ts.showInPage,
 							action: () => {
-								router.push(notePage(appearNote), "forcePage");
+								router.push(
+									notePage(appearNote.value),
+									"forcePage",
+								);
 							},
 					  }
 					: undefined,
@@ -448,22 +453,25 @@ function onContextmenu(ev: MouseEvent): void {
 					type: "a",
 					icon: "ph-arrow-square-out ph-bold ph-lg",
 					text: i18n.ts.openInNewTab,
-					href: notePage(appearNote),
+					href: notePage(appearNote.value),
 					target: "_blank",
 				},
 				{
 					icon: "ph-link-simple ph-bold ph-lg",
 					text: i18n.ts.copyLink,
 					action: () => {
-						copyToClipboard(`${url}${notePage(appearNote)}`);
+						copyToClipboard(`${url}${notePage(appearNote.value)}`);
 					},
 				},
-				appearNote.user.host != null
+				appearNote.value.user.host != null
 					? {
 							type: "a",
 							icon: "ph-arrow-square-up-right ph-bold ph-lg",
 							text: i18n.ts.showOnRemote,
-							href: appearNote.url ?? appearNote.uri ?? "",
+							href:
+								appearNote.value.url ??
+								appearNote.value.uri ??
+								"",
 							target: "_blank",
 					  }
 					: undefined,
@@ -476,7 +484,7 @@ function onContextmenu(ev: MouseEvent): void {
 function menu(viaKeyboard = false): void {
 	os.popupMenu(
 		getNoteMenu({
-			note: note,
+			note: note.value,
 			translating,
 			translation,
 			menuButton,
@@ -500,7 +508,7 @@ function showRenoteMenu(viaKeyboard = false): void {
 				danger: true,
 				action: () => {
 					os.api("notes/delete", {
-						noteId: note.id,
+						noteId: note.value.id,
 					});
 					isDeleted.value = true;
 				},
@@ -541,13 +549,13 @@ function noteClick(e) {
 	) {
 		e.stopPropagation();
 	} else {
-		router.push(notePage(appearNote));
+		router.push(notePage(appearNote.value));
 	}
 }
 
 function readPromo() {
 	os.api("promo/read", {
-		noteId: appearNote.id,
+		noteId: appearNote.value.id,
 	});
 	isDeleted.value = true;
 }
@@ -559,28 +567,30 @@ function setPostExpanded(val: boolean) {
 }
 
 const accessibleLabel = computed(() => {
-	let label = `${appearNote.user.username}; `;
-	if (appearNote.renote) {
-		label += `${i18n.t("renoted")} ${appearNote.renote.user.username}; `;
-		if (appearNote.renote.cw) {
-			label += `${i18n.t("cw")}: ${appearNote.renote.cw}; `;
+	let label = `${appearNote.value.user.username}; `;
+	if (appearNote.value.renote) {
+		label += `${i18n.t("renoted")} ${
+			appearNote.value.renote.user.username
+		}; `;
+		if (appearNote.value.renote.cw) {
+			label += `${i18n.t("cw")}: ${appearNote.value.renote.cw}; `;
 			if (postIsExpanded.value) {
-				label += `${appearNote.renote.text}; `;
+				label += `${appearNote.value.renote.text}; `;
 			}
 		} else {
-			label += `${appearNote.renote.text}; `;
+			label += `${appearNote.value.renote.text}; `;
 		}
 	} else {
-		if (appearNote.cw) {
-			label += `${i18n.t("cw")}: ${appearNote.cw}; `;
+		if (appearNote.value.cw) {
+			label += `${i18n.t("cw")}: ${appearNote.value.cw}; `;
 			if (postIsExpanded.value) {
-				label += `${appearNote.text}; `;
+				label += `${appearNote.value.text}; `;
 			}
 		} else {
-			label += `${appearNote.text}; `;
+			label += `${appearNote.value.text}; `;
 		}
 	}
-	const date = new Date(appearNote.createdAt);
+	const date = new Date(appearNote.value.createdAt);
 	label += `${date.toLocaleTimeString()}`;
 	return label;
 });
diff --git a/packages/client/src/components/MkNoteDetailed.vue b/packages/client/src/components/MkNoteDetailed.vue
index 7da81718b1..041239b19d 100644
--- a/packages/client/src/components/MkNoteDetailed.vue
+++ b/packages/client/src/components/MkNoteDetailed.vue
@@ -177,9 +177,9 @@ const props = defineProps<{
 	pinned?: boolean;
 }>();
 
-let tab = $ref("replies");
+let tab = ref("replies");
 
-let note = $ref(deepClone(props.note));
+let note = ref(deepClone(props.note));
 
 const softMuteReasonI18nSrc = (what?: string) => {
 	if (what === "note") return i18n.ts.userSaysSomethingReason;
@@ -194,30 +194,32 @@ const softMuteReasonI18nSrc = (what?: string) => {
 // plugin
 if (noteViewInterruptors.length > 0) {
 	onMounted(async () => {
-		let result = deepClone(note);
+		let result = deepClone(note.value);
 		for (const interruptor of noteViewInterruptors) {
 			result = await interruptor.handler(result);
 		}
-		note = result;
+		note.value = result;
 	});
 }
 
 const el = ref<HTMLElement>();
-const noteEl = $ref();
+const noteEl = ref();
 const menuButton = ref<HTMLElement>();
 const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
 const reactButton = ref<HTMLElement>();
 const showContent = ref(false);
 const isDeleted = ref(false);
-const muted = ref(getWordSoftMute(note, $i, defaultStore.state.mutedWords));
+const muted = ref(
+	getWordSoftMute(note.value, $i, defaultStore.state.mutedWords),
+);
 const translation = ref(null);
 const translating = ref(false);
-let conversation = $ref<null | misskey.entities.Note[]>([]);
+let conversation = ref<null | misskey.entities.Note[]>([]);
 const replies = ref<misskey.entities.Note[]>([]);
-let directReplies = $ref<null | misskey.entities.Note[]>([]);
-let directQuotes = $ref<null | misskey.entities.Note[]>([]);
-let clips = $ref();
-let renotes = $ref();
+let directReplies = ref<null | misskey.entities.Note[]>([]);
+let directQuotes = ref<null | misskey.entities.Note[]>([]);
+let clips = ref();
+let renotes = ref();
 let isScrolling;
 
 const reactionsCount = Object.values(props.note.reactions).reduce(
@@ -236,14 +238,14 @@ const keymap = {
 
 useNoteCapture({
 	rootEl: el,
-	note: $$(note),
+	note: note,
 	isDeletedRef: isDeleted,
 });
 
 function reply(viaKeyboard = false): void {
 	pleaseLogin();
 	os.post({
-		reply: note,
+		reply: note.value,
 		animation: !viaKeyboard,
 	}).then(() => {
 		focus();
@@ -257,7 +259,7 @@ function react(viaKeyboard = false): void {
 		reactButton.value,
 		(reaction) => {
 			os.api("notes/reactions/create", {
-				noteId: note.id,
+				noteId: note.value.id,
 				reaction: reaction,
 			});
 		},
@@ -291,7 +293,7 @@ function onContextmenu(ev: MouseEvent): void {
 	} else {
 		os.contextMenu(
 			getNoteMenu({
-				note: note,
+				note: note.value,
 				translating,
 				translation,
 				menuButton,
@@ -305,7 +307,7 @@ function onContextmenu(ev: MouseEvent): void {
 function menu(viaKeyboard = false): void {
 	os.popupMenu(
 		getNoteMenu({
-			note: note,
+			note: note.value,
 			translating,
 			translation,
 			menuButton,
@@ -319,48 +321,50 @@ function menu(viaKeyboard = false): void {
 }
 
 function focus() {
-	noteEl.focus();
+	noteEl.value.focus();
 }
 
 function blur() {
-	noteEl.blur();
+	noteEl.value.blur();
 }
 
-directReplies = null;
+directReplies.value = null;
 os.api("notes/children", {
-	noteId: note.id,
+	noteId: note.value.id,
 	limit: 30,
 	depth: 12,
 }).then((res) => {
 	res = res.reduce((acc, resNote) => {
-		if (resNote.userId == note.userId) {
+		if (resNote.userId == note.value.userId) {
 			return [...acc, resNote];
 		}
 		return [resNote, ...acc];
 	}, []);
 	replies.value = res;
-	directReplies = res
-		.filter((resNote) => resNote.replyId === note.id)
+	directReplies.value = res
+		.filter((resNote) => resNote.replyId === note.value.id)
 		.reverse();
-	directQuotes = res.filter((resNote) => resNote.renoteId === note.id);
+	directQuotes.value = res.filter(
+		(resNote) => resNote.renoteId === note.value.id,
+	);
 });
 
-conversation = null;
-if (note.replyId) {
+conversation.value = null;
+if (note.value.replyId) {
 	os.api("notes/conversation", {
-		noteId: note.replyId,
+		noteId: note.value.replyId,
 		limit: 30,
 	}).then((res) => {
-		conversation = res.reverse();
+		conversation.value = res.reverse();
 		focus();
 	});
 }
 
-clips = null;
+clips.value = null;
 os.api("notes/clips", {
-	noteId: note.id,
+	noteId: note.value.id,
 }).then((res) => {
-	clips = res;
+	clips.value = res;
 });
 
 // const pagination = {
@@ -371,14 +375,14 @@ os.api("notes/clips", {
 
 // const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
 
-renotes = null;
+renotes.value = null;
 function loadTab() {
-	if (tab === "renotes" && !renotes) {
+	if (tab.value === "renotes" && !renotes.value) {
 		os.api("notes/renotes", {
-			noteId: note.id,
+			noteId: note.value.id,
 			limit: 100,
 		}).then((res) => {
-			renotes = res;
+			renotes.value = res;
 		});
 	}
 }
@@ -387,7 +391,7 @@ async function onNoteUpdated(noteData: NoteUpdatedEvent): Promise<void> {
 	const { type, id, body } = noteData;
 
 	let found = -1;
-	if (id === note.id) {
+	if (id === note.value.id) {
 		found = 0;
 	} else {
 		for (let i = 0; i < replies.value.length; i++) {
@@ -412,7 +416,7 @@ async function onNoteUpdated(noteData: NoteUpdatedEvent): Promise<void> {
 
 			replies.value.splice(found, 0, replyNote);
 			if (found === 0) {
-				directReplies.push(replyNote);
+				directReplies.value.push(replyNote);
 			}
 			break;
 
@@ -433,12 +437,12 @@ document.addEventListener("wheel", () => {
 onMounted(() => {
 	stream.on("noteUpdated", onNoteUpdated);
 	isScrolling = false;
-	noteEl.scrollIntoView();
+	noteEl.value.scrollIntoView();
 });
 
 onUpdated(() => {
 	if (!isScrolling) {
-		noteEl.scrollIntoView();
+		noteEl.value.scrollIntoView();
 		if (location.hash) {
 			location.replace(location.hash); // Jump to highlighted reply
 		}
diff --git a/packages/client/src/components/MkNoteHeader.vue b/packages/client/src/components/MkNoteHeader.vue
index ee11060f3c..a0ccedd603 100644
--- a/packages/client/src/components/MkNoteHeader.vue
+++ b/packages/client/src/components/MkNoteHeader.vue
@@ -47,6 +47,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import {} from "vue";
 import type * as misskey from "firefish-js";
 import { defaultStore } from "@/store";
@@ -61,11 +63,12 @@ const props = defineProps<{
 	pinned?: boolean;
 }>();
 
-let note = $ref(props.note);
+let note = ref(props.note);
 
 const showTicker =
 	defaultStore.state.instanceTicker === "always" ||
-	(defaultStore.state.instanceTicker === "remote" && note.user.instance);
+	(defaultStore.state.instanceTicker === "remote" &&
+		note.value.user.instance);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/MkNoteSub.vue b/packages/client/src/components/MkNoteSub.vue
index 690ba62ad9..5d73ac24b4 100644
--- a/packages/client/src/components/MkNoteSub.vue
+++ b/packages/client/src/components/MkNoteSub.vue
@@ -177,7 +177,7 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, ref } from "vue";
+import { inject, ref, computed } from "vue";
 import type { Ref } from "vue";
 import * as misskey from "firefish-js";
 import XNoteHeader from "@/components/MkNoteHeader.vue";
@@ -223,7 +223,7 @@ const props = withDefaults(
 	},
 );
 
-let note = $ref(deepClone(props.note));
+let note = ref(deepClone(props.note));
 
 const softMuteReasonI18nSrc = (what?: string) => {
 	if (what === "note") return i18n.ts.userSaysSomethingReason;
@@ -236,10 +236,10 @@ const softMuteReasonI18nSrc = (what?: string) => {
 };
 
 const isRenote =
-	note.renote != null &&
-	note.text == null &&
-	note.fileIds.length === 0 &&
-	note.poll == null;
+	note.value.renote != null &&
+	note.value.text == null &&
+	note.value.fileIds.length === 0 &&
+	note.value.poll == null;
 
 const el = ref<HTMLElement>();
 const footerEl = ref<HTMLElement>();
@@ -247,11 +247,13 @@ const menuButton = ref<HTMLElement>();
 const starButton = ref<InstanceType<typeof XStarButton>>();
 const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
 const reactButton = ref<HTMLElement>();
-let appearNote = $computed(() =>
-	isRenote ? (note.renote as misskey.entities.Note) : note,
+let appearNote = computed(() =>
+	isRenote ? (note.value.renote as misskey.entities.Note) : note.value,
 );
 const isDeleted = ref(false);
-const muted = ref(getWordSoftMute(note, $i, defaultStore.state.mutedWords));
+const muted = ref(
+	getWordSoftMute(note.value, $i, defaultStore.state.mutedWords),
+);
 const translation = ref(null);
 const translating = ref(false);
 const replies: misskey.entities.Note[] =
@@ -267,14 +269,14 @@ const expandOnNoteClick = defaultStore.state.expandOnNoteClick;
 
 useNoteCapture({
 	rootEl: el,
-	note: $$(appearNote),
+	note: appearNote,
 	isDeletedRef: isDeleted,
 });
 
 function reply(viaKeyboard = false): void {
 	pleaseLogin();
 	os.post({
-		reply: appearNote,
+		reply: appearNote.value,
 		animation: !viaKeyboard,
 	}).then(() => {
 		focus();
@@ -288,7 +290,7 @@ function react(viaKeyboard = false): void {
 		reactButton.value,
 		(reaction) => {
 			os.api("notes/reactions/create", {
-				noteId: appearNote.id,
+				noteId: appearNote.value.id,
 				reaction: reaction,
 			});
 		},
@@ -314,7 +316,7 @@ const currentClipPage = inject<Ref<misskey.entities.Clip> | null>(
 function menu(viaKeyboard = false): void {
 	os.popupMenu(
 		getNoteMenu({
-			note: note,
+			note: note.value,
 			translating,
 			translation,
 			menuButton,
@@ -346,21 +348,24 @@ function onContextmenu(ev: MouseEvent): void {
 			[
 				{
 					type: "label",
-					text: notePage(appearNote),
+					text: notePage(appearNote.value),
 				},
 				{
 					icon: "ph-browser ph-bold ph-lg",
 					text: i18n.ts.openInWindow,
 					action: () => {
-						os.pageWindow(notePage(appearNote));
+						os.pageWindow(notePage(appearNote.value));
 					},
 				},
-				notePage(appearNote) != location.pathname
+				notePage(appearNote.value) != location.pathname
 					? {
 							icon: "ph-arrows-out-simple ph-bold ph-lg",
 							text: i18n.ts.showInPage,
 							action: () => {
-								router.push(notePage(appearNote), "forcePage");
+								router.push(
+									notePage(appearNote.value),
+									"forcePage",
+								);
 							},
 					  }
 					: undefined,
@@ -369,22 +374,22 @@ function onContextmenu(ev: MouseEvent): void {
 					type: "a",
 					icon: "ph-arrow-square-out ph-bold ph-lg",
 					text: i18n.ts.openInNewTab,
-					href: notePage(appearNote),
+					href: notePage(appearNote.value),
 					target: "_blank",
 				},
 				{
 					icon: "ph-link-simple ph-bold ph-lg",
 					text: i18n.ts.copyLink,
 					action: () => {
-						copyToClipboard(`${url}${notePage(appearNote)}`);
+						copyToClipboard(`${url}${notePage(appearNote.value)}`);
 					},
 				},
-				note.user.host != null
+				note.value.user.host != null
 					? {
 							type: "a",
 							icon: "ph-arrow-square-up-right ph-bold ph-lg",
 							text: i18n.ts.showOnRemote,
-							href: note.url ?? note.uri ?? "",
+							href: note.value.url ?? note.value.uri ?? "",
 							target: "_blank",
 					  }
 					: undefined,
diff --git a/packages/client/src/components/MkNotificationSettingWindow.vue b/packages/client/src/components/MkNotificationSettingWindow.vue
index 4471cb8186..9131a67780 100644
--- a/packages/client/src/components/MkNotificationSettingWindow.vue
+++ b/packages/client/src/components/MkNotificationSettingWindow.vue
@@ -39,6 +39,8 @@
 </template>
 
 <script lang="ts" setup>
+import { computed, ref } from "vue";
+
 import {} from "vue";
 import { notificationTypes } from "firefish-js";
 import MkSwitch from "./form/switch.vue";
@@ -63,43 +65,45 @@ const props = withDefaults(
 	},
 );
 
-let includingTypes = $computed(() => props.includingTypes || []);
+let includingTypes = computed(() => props.includingTypes || []);
 
-const dialog = $ref<InstanceType<typeof XModalWindow>>();
+const dialog = ref<InstanceType<typeof XModalWindow>>();
 
-let typesMap = $ref<Record<(typeof notificationTypes)[number], boolean>>({});
-let useGlobalSetting = $ref(
-	(includingTypes === null || includingTypes.length === 0) &&
+let typesMap = ref<Record<(typeof notificationTypes)[number], boolean>>({});
+let useGlobalSetting = ref(
+	(includingTypes.value === null || includingTypes.value.length === 0) &&
 		props.showGlobalToggle,
 );
 
 for (const ntype of notificationTypes) {
-	typesMap[ntype] = includingTypes.includes(ntype);
+	typesMap.value[ntype] = includingTypes.value.includes(ntype);
 }
 
 function ok() {
-	if (useGlobalSetting) {
+	if (useGlobalSetting.value) {
 		emit("done", { includingTypes: null });
 	} else {
 		emit("done", {
 			includingTypes: (
-				Object.keys(typesMap) as (typeof notificationTypes)[number][]
-			).filter((type) => typesMap[type]),
+				Object.keys(
+					typesMap.value,
+				) as (typeof notificationTypes)[number][]
+			).filter((type) => typesMap.value[type]),
 		});
 	}
 
-	dialog.close();
+	dialog.value.close();
 }
 
 function disableAll() {
-	for (const type in typesMap) {
-		typesMap[type as (typeof notificationTypes)[number]] = false;
+	for (const type in typesMap.value) {
+		typesMap.value[type as (typeof notificationTypes)[number]] = false;
 	}
 }
 
 function enableAll() {
-	for (const type in typesMap) {
-		typesMap[type as (typeof notificationTypes)[number]] = true;
+	for (const type in typesMap.value) {
+		typesMap.value[type as (typeof notificationTypes)[number]] = true;
 	}
 }
 </script>
diff --git a/packages/client/src/components/MkNotificationToast.vue b/packages/client/src/components/MkNotificationToast.vue
index 20b0848554..d6ee9ea6b3 100644
--- a/packages/client/src/components/MkNotificationToast.vue
+++ b/packages/client/src/components/MkNotificationToast.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import XNotification from "@/components/MkNotification.vue";
 import * as os from "@/os";
 
@@ -28,11 +28,11 @@ const emit = defineEmits<{
 }>();
 
 const zIndex = os.claimZIndex("high");
-let showing = $ref(true);
+let showing = ref(true);
 
 onMounted(() => {
 	window.setTimeout(() => {
-		showing = false;
+		showing.value = false;
 	}, 6000);
 });
 </script>
diff --git a/packages/client/src/components/MkPageWindow.vue b/packages/client/src/components/MkPageWindow.vue
index 2f3b469fe7..dc4d29c895 100644
--- a/packages/client/src/components/MkPageWindow.vue
+++ b/packages/client/src/components/MkPageWindow.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ComputedRef, provide } from "vue";
+import { ComputedRef, provide, ref, computed } from "vue";
 import RouterView from "@/components/global/RouterView.vue";
 import XWindow from "@/components/MkWindow.vue";
 import { popout as _popout } from "@/scripts/popout";
@@ -51,18 +51,18 @@ defineEmits<{
 
 const router = new Router(routes, props.initialPath);
 
-let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
-let windowEl = $ref<InstanceType<typeof XWindow>>();
-const history = $ref<{ path: string; key: any }[]>([
+let pageMetadata = ref<null | ComputedRef<PageMetadata>>();
+let windowEl = ref<InstanceType<typeof XWindow>>();
+const history = ref<{ path: string; key: any }[]>([
 	{
 		path: router.getCurrentPath(),
 		key: router.getCurrentKey(),
 	},
 ]);
-const buttonsLeft = $computed(() => {
+const buttonsLeft = computed(() => {
 	const buttons = [];
 
-	if (history.length > 1) {
+	if (history.value.length > 1) {
 		buttons.push({
 			icon: "ph-caret-left ph-bold ph-lg",
 			onClick: back,
@@ -71,7 +71,7 @@ const buttonsLeft = $computed(() => {
 
 	return buttons;
 });
-const buttonsRight = $computed(() => {
+const buttonsRight = computed(() => {
 	const buttons = [
 		{
 			icon: "ph-arrows-out-simple ph-bold ph-lg",
@@ -84,18 +84,18 @@ const buttonsRight = $computed(() => {
 });
 
 router.addListener("push", (ctx) => {
-	history.push({ path: ctx.path, key: ctx.key });
+	history.value.push({ path: ctx.path, key: ctx.key });
 });
 
 provide("router", router);
 provideMetadataReceiver((info) => {
-	pageMetadata = info;
+	pageMetadata.value = info;
 });
 provide("shouldOmitHeaderTitle", true);
 provide("shouldBackButton", false);
 provide("shouldHeaderThin", true);
 
-const contextmenu = $computed(() => [
+const contextmenu = computed(() => [
 	{
 		icon: "ph-arrows-out-simple ph-bold ph-lg",
 		text: i18n.ts.showInPage,
@@ -111,7 +111,7 @@ const contextmenu = $computed(() => [
 		text: i18n.ts.openInNewTab,
 		action: () => {
 			window.open(url + router.getCurrentPath(), "_blank");
-			windowEl.close();
+			windowEl.value.close();
 		},
 	},
 	{
@@ -124,25 +124,25 @@ const contextmenu = $computed(() => [
 ]);
 
 function back() {
-	history.pop();
+	history.value.pop();
 	router.replace(
-		history[history.length - 1].path,
-		history[history.length - 1].key,
+		history.value[history.value.length - 1].path,
+		history.value[history.value.length - 1].key,
 	);
 }
 
 function close() {
-	windowEl.close();
+	windowEl.value.close();
 }
 
 function expand() {
 	mainRouter.push(router.getCurrentPath(), "forcePage");
-	windowEl.close();
+	windowEl.value.close();
 }
 
 function popout() {
-	_popout(router.getCurrentPath(), windowEl.$el);
-	windowEl.close();
+	_popout(router.getCurrentPath(), windowEl.value.$el);
+	windowEl.value.close();
 }
 
 defineExpose({
diff --git a/packages/client/src/components/MkPopupMenu.vue b/packages/client/src/components/MkPopupMenu.vue
index 739c9e30ff..9537ac9edf 100644
--- a/packages/client/src/components/MkPopupMenu.vue
+++ b/packages/client/src/components/MkPopupMenu.vue
@@ -24,6 +24,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import MkModal from "./MkModal.vue";
 import MkMenu from "./MkMenu.vue";
 import { MenuItem } from "@/types/menu";
@@ -41,7 +43,7 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-let modal = $ref<InstanceType<typeof MkModal>>();
+let modal = ref<InstanceType<typeof MkModal>>();
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/MkPostForm.vue b/packages/client/src/components/MkPostForm.vue
index 8c619b9bbf..a65f48d568 100644
--- a/packages/client/src/components/MkPostForm.vue
+++ b/packages/client/src/components/MkPostForm.vue
@@ -233,7 +233,15 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, watch, nextTick, onMounted, defineAsyncComponent } from "vue";
+import {
+	inject,
+	watch,
+	nextTick,
+	onMounted,
+	defineAsyncComponent,
+	ref,
+	computed,
+} from "vue";
 import * as mfm from "mfm-js";
 import * as misskey from "firefish-js";
 import autosize from "autosize";
@@ -302,45 +310,45 @@ const emit = defineEmits<{
 	(ev: "esc"): void;
 }>();
 
-const textareaEl = $ref<HTMLTextAreaElement | null>(null);
-const cwInputEl = $ref<HTMLInputElement | null>(null);
-const hashtagsInputEl = $ref<HTMLInputElement | null>(null);
-const visibilityButton = $ref<HTMLElement | null>(null);
+const textareaEl = ref<HTMLTextAreaElement | null>(null);
+const cwInputEl = ref<HTMLInputElement | null>(null);
+const hashtagsInputEl = ref<HTMLInputElement | null>(null);
+const visibilityButton = ref<HTMLElement | null>(null);
 
-let posting = $ref(false);
-let text = $ref(props.initialText ?? "");
-let files = $ref(props.initialFiles ?? []);
-let poll = $ref<{
+let posting = ref(false);
+let text = ref(props.initialText ?? "");
+let files = ref(props.initialFiles ?? []);
+let poll = ref<{
 	choices: string[];
 	multiple: boolean;
 	expiresAt: string | null;
 	expiredAfter: string | null;
 } | null>(null);
-let useCw = $ref(false);
-let showPreview = $ref(false);
-let cw = $ref<string | null>(null);
-let localOnly = $ref<boolean>(
+let useCw = ref(false);
+let showPreview = ref(false);
+let cw = ref<string | null>(null);
+let localOnly = ref<boolean>(
 	props.initialLocalOnly ?? defaultStore.state.rememberNoteVisibility
 		? defaultStore.state.localOnly
 		: defaultStore.state.defaultNoteLocalOnly,
 );
-let visibility = $ref(
+let visibility = ref(
 	props.initialVisibility ??
 		((defaultStore.state.rememberNoteVisibility
 			? defaultStore.state.visibility
 			: defaultStore.state
 					.defaultNoteVisibility) as (typeof misskey.noteVisibilities)[number]),
 );
-let visibleUsers = $ref([]);
+let visibleUsers = ref([]);
 if (props.initialVisibleUsers) {
 	props.initialVisibleUsers.forEach(pushVisibleUser);
 }
-let autocomplete = $ref(null);
-let draghover = $ref(false);
-let quoteId = $ref(null);
-let hasNotSpecifiedMentions = $ref(false);
-let recentHashtags = $ref(JSON.parse(localStorage.getItem("hashtags") || "[]"));
-let imeText = $ref("");
+let autocomplete = ref(null);
+let draghover = ref(false);
+let quoteId = ref(null);
+let hasNotSpecifiedMentions = ref(false);
+let recentHashtags = ref(JSON.parse(localStorage.getItem("hashtags") || "[]"));
+let imeText = ref("");
 
 const typing = throttle(3000, () => {
 	if (props.channel) {
@@ -348,7 +356,7 @@ const typing = throttle(3000, () => {
 	}
 });
 
-const draftKey = $computed((): string => {
+const draftKey = computed((): string => {
 	if (props.editId) {
 		return `edit:${props.editId}`;
 	}
@@ -366,7 +374,7 @@ const draftKey = $computed((): string => {
 	return key;
 });
 
-const placeholder = $computed((): string => {
+const placeholder = computed((): string => {
 	if (props.renote) {
 		return i18n.ts._postForm.quotePlaceholder;
 	} else if (props.reply) {
@@ -386,7 +394,7 @@ const placeholder = $computed((): string => {
 	}
 });
 
-const submitText = $computed((): string => {
+const submitText = computed((): string => {
 	return props.editId
 		? i18n.ts.edit
 		: props.renote
@@ -396,34 +404,37 @@ const submitText = $computed((): string => {
 		: i18n.ts.note;
 });
 
-const textLength = $computed((): number => {
-	return length((preprocess(text) + imeText).trim());
+const textLength = computed((): number => {
+	return length((preprocess(text.value) + imeText.value).trim());
 });
 
-const maxTextLength = $computed((): number => {
+const maxTextLength = computed((): number => {
 	return instance ? instance.maxNoteTextLength : 3000;
 });
 
-const canPost = $computed((): boolean => {
+const canPost = computed((): boolean => {
 	return (
-		!posting &&
-		(1 <= textLength || 1 <= files.length || !!poll || !!props.renote) &&
-		textLength <= maxTextLength &&
-		(!poll || poll.choices.length >= 2)
+		!posting.value &&
+		(1 <= textLength.value ||
+			1 <= files.value.length ||
+			!!poll.value ||
+			!!props.renote) &&
+		textLength.value <= maxTextLength.value &&
+		(!poll.value || poll.value.choices.length >= 2)
 	);
 });
 
-const withHashtags = $computed(
+const withHashtags = computed(
 	defaultStore.makeGetterSetter("postFormWithHashtags"),
 );
-const hashtags = $computed(defaultStore.makeGetterSetter("postFormHashtags"));
+const hashtags = computed(defaultStore.makeGetterSetter("postFormHashtags"));
 
-watch($$(text), () => {
+watch(text, () => {
 	checkMissingMention();
 });
 
 watch(
-	$$(visibleUsers),
+	visibleUsers,
 	() => {
 		checkMissingMention();
 	},
@@ -433,10 +444,10 @@ watch(
 );
 
 if (props.mention) {
-	text = props.mention.host
+	text.value = props.mention.host
 		? `@${props.mention.username}@${toASCII(props.mention.host)}`
 		: `@${props.mention.username}`;
-	text += " ";
+	text.value += " ";
 }
 
 if (
@@ -444,7 +455,7 @@ if (
 	(props.reply.user.username !== $i.username ||
 		(props.reply.user.host != null && props.reply.user.host !== host))
 ) {
-	text = `@${props.reply.user.username}${
+	text.value = `@${props.reply.user.username}${
 		props.reply.user.host != null
 			? "@" + toASCII(props.reply.user.host)
 			: ""
@@ -467,15 +478,15 @@ if (props.reply && props.reply.text != null) {
 			continue;
 
 		// 重複は除外
-		if (text.includes(`${mention} `)) continue;
+		if (text.value.includes(`${mention} `)) continue;
 
-		text += `${mention} `;
+		text.value += `${mention} `;
 	}
 }
 
 if (props.channel) {
-	visibility = "public";
-	localOnly = true; // TODO: チャンネルが連合するようになった折には消す
+	visibility.value = "public";
+	localOnly.value = true; // TODO: チャンネルが連合するようになった折には消す
 }
 
 // 公開以外へのリプライ時は元の公開範囲を引き継ぐ
@@ -483,17 +494,17 @@ if (
 	props.reply &&
 	["home", "followers", "specified"].includes(props.reply.visibility)
 ) {
-	if (props.reply.visibility === "home" && visibility === "followers") {
-		visibility = "followers";
+	if (props.reply.visibility === "home" && visibility.value === "followers") {
+		visibility.value = "followers";
 	} else if (
 		["home", "followers"].includes(props.reply.visibility) &&
-		visibility === "specified"
+		visibility.value === "specified"
 	) {
-		visibility = "specified";
+		visibility.value = "specified";
 	} else {
-		visibility = props.reply.visibility;
+		visibility.value = props.reply.visibility;
 	}
-	if (visibility === "specified") {
+	if (visibility.value === "specified") {
 		if (props.reply.visibleUserIds) {
 			os.api("users/show", {
 				userIds: props.reply.visibleUserIds.filter(
@@ -515,7 +526,7 @@ if (
 }
 
 if (props.specified) {
-	visibility = "specified";
+	visibility.value = "specified";
 	pushVisibleUser(props.specified);
 }
 
@@ -531,53 +542,53 @@ const addRe = (s: string) => {
 
 // keep cw when reply
 if (defaultStore.state.keepCw && props.reply && props.reply.cw) {
-	useCw = true;
-	cw =
+	useCw.value = true;
+	cw.value =
 		props.reply.user.username === $i.username
 			? props.reply.cw
 			: addRe(props.reply.cw);
 }
 
 function watchForDraft() {
-	watch($$(text), () => saveDraft());
-	watch($$(useCw), () => saveDraft());
-	watch($$(cw), () => saveDraft());
-	watch($$(poll), () => saveDraft());
-	watch($$(files), () => saveDraft(), { deep: true });
-	watch($$(visibility), () => saveDraft());
-	watch($$(localOnly), () => saveDraft());
+	watch(text, () => saveDraft());
+	watch(useCw, () => saveDraft());
+	watch(cw, () => saveDraft());
+	watch(poll, () => saveDraft());
+	watch(files, () => saveDraft(), { deep: true });
+	watch(visibility, () => saveDraft());
+	watch(localOnly, () => saveDraft());
 }
 
 function checkMissingMention() {
-	if (visibility === "specified") {
-		const ast = mfm.parse(text);
+	if (visibility.value === "specified") {
+		const ast = mfm.parse(text.value);
 
 		for (const x of extractMentions(ast)) {
 			if (
-				!visibleUsers.some(
+				!visibleUsers.value.some(
 					(u) => u.username === x.username && u.host === x.host,
 				)
 			) {
-				hasNotSpecifiedMentions = true;
+				hasNotSpecifiedMentions.value = true;
 				return;
 			}
 		}
-		hasNotSpecifiedMentions = false;
+		hasNotSpecifiedMentions.value = false;
 	}
 }
 
 function addMissingMention() {
-	const ast = mfm.parse(text);
+	const ast = mfm.parse(text.value);
 
 	for (const x of extractMentions(ast)) {
 		if (
-			!visibleUsers.some(
+			!visibleUsers.value.some(
 				(u) => u.username === x.username && u.host === x.host,
 			)
 		) {
 			os.api("users/show", { username: x.username, host: x.host }).then(
 				(user) => {
-					visibleUsers.push(user);
+					visibleUsers.value.push(user);
 				},
 			);
 		}
@@ -585,10 +596,10 @@ function addMissingMention() {
 }
 
 function togglePoll() {
-	if (poll) {
-		poll = null;
+	if (poll.value) {
+		poll.value = null;
 	} else {
-		poll = {
+		poll.value = {
 			choices: ["", ""],
 			multiple: false,
 			expiresAt: null,
@@ -598,15 +609,15 @@ function togglePoll() {
 }
 
 function addTag(tag: string) {
-	insertTextAtCursor(textareaEl, ` #${tag} `);
+	insertTextAtCursor(textareaEl.value, ` #${tag} `);
 }
 
 function focus() {
-	if (textareaEl) {
-		textareaEl.focus();
-		textareaEl.setSelectionRange(
-			textareaEl.value.length,
-			textareaEl.value.length,
+	if (textareaEl.value) {
+		textareaEl.value.focus();
+		textareaEl.value.setSelectionRange(
+			textareaEl.value.value.length,
+			textareaEl.value.value.length,
 		);
 	}
 }
@@ -615,31 +626,32 @@ function chooseFileFrom(ev) {
 	selectFiles(ev.currentTarget ?? ev.target, i18n.ts.attachFile).then(
 		(files_) => {
 			for (const file of files_) {
-				files.push(file);
+				files.value.push(file);
 			}
 		},
 	);
 }
 
 function detachFile(id) {
-	files = files.filter((x) => x.id !== id);
+	files.value = files.value.filter((x) => x.id !== id);
 }
 
 function updateFiles(_files) {
-	files = _files;
+	files.value = _files;
 }
 
 function updateFileSensitive(file, sensitive) {
-	files[files.findIndex((x) => x.id === file.id)].isSensitive = sensitive;
+	files.value[files.value.findIndex((x) => x.id === file.id)].isSensitive =
+		sensitive;
 }
 
 function updateFileName(file, name) {
-	files[files.findIndex((x) => x.id === file.id)].name = name;
+	files.value[files.value.findIndex((x) => x.id === file.id)].name = name;
 }
 
 function upload(file: File, name?: string) {
 	uploadFile(file, defaultStore.state.uploadFolder, name).then((res) => {
-		files.push(res);
+		files.value.push(res);
 	});
 }
 
@@ -654,21 +666,21 @@ function setVisibility() {
 			() => import("@/components/MkVisibilityPicker.vue"),
 		),
 		{
-			currentVisibility: visibility,
-			currentLocalOnly: localOnly,
-			src: visibilityButton,
+			currentVisibility: visibility.value,
+			currentLocalOnly: localOnly.value,
+			src: visibilityButton.value,
 		},
 		{
 			changeVisibility: (v) => {
-				visibility = v;
+				visibility.value = v;
 				if (defaultStore.state.rememberNoteVisibility) {
-					defaultStore.set("visibility", visibility);
+					defaultStore.set("visibility", visibility.value);
 				}
 			},
 			changeLocalOnly: (v) => {
-				localOnly = v;
+				localOnly.value = v;
 				if (defaultStore.state.rememberNoteVisibility) {
-					defaultStore.set("localOnly", localOnly);
+					defaultStore.set("localOnly", localOnly.value);
 				}
 			},
 		},
@@ -678,11 +690,11 @@ function setVisibility() {
 
 function pushVisibleUser(user) {
 	if (
-		!visibleUsers.some(
+		!visibleUsers.value.some(
 			(u) => u.username === user.username && u.host === user.host,
 		)
 	) {
-		visibleUsers.push(user);
+		visibleUsers.value.push(user);
 	}
 }
 
@@ -693,21 +705,21 @@ function addVisibleUser() {
 }
 
 function removeVisibleUser(user) {
-	visibleUsers = erase(user, visibleUsers);
+	visibleUsers.value = erase(user, visibleUsers.value);
 }
 
 function clear() {
-	text = "";
-	files = [];
-	poll = null;
-	quoteId = null;
+	text.value = "";
+	files.value = [];
+	poll.value = null;
+	quoteId.value = null;
 }
 
 function onKeydown(ev: KeyboardEvent) {
 	if (
 		(ev.which === 10 || ev.which === 13) &&
 		(ev.ctrlKey || ev.metaKey) &&
-		canPost
+		canPost.value
 	)
 		post();
 	if (ev.which === 27) emit("esc");
@@ -715,12 +727,12 @@ function onKeydown(ev: KeyboardEvent) {
 }
 
 function onCompositionUpdate(ev: CompositionEvent) {
-	imeText = ev.data;
+	imeText.value = ev.data;
 	typing();
 }
 
 function onCompositionEnd(ev: CompositionEvent) {
-	imeText = "";
+	imeText.value = "";
 }
 
 async function onPaste(ev: ClipboardEvent) {
@@ -741,7 +753,7 @@ async function onPaste(ev: ClipboardEvent) {
 
 	const paste = ev.clipboardData.getData("text");
 
-	if (!props.renote && !quoteId && paste.startsWith(url + "/notes/")) {
+	if (!props.renote && !quoteId.value && paste.startsWith(url + "/notes/")) {
 		ev.preventDefault();
 
 		os.yesno({
@@ -749,11 +761,13 @@ async function onPaste(ev: ClipboardEvent) {
 			text: i18n.ts.quoteQuestion,
 		}).then(({ canceled }) => {
 			if (canceled) {
-				insertTextAtCursor(textareaEl, paste);
+				insertTextAtCursor(textareaEl.value, paste);
 				return;
 			}
 
-			quoteId = paste.substr(url.length).match(/^\/notes\/(.+?)\/?$/)[1];
+			quoteId.value = paste
+				.substr(url.length)
+				.match(/^\/notes\/(.+?)\/?$/)[1];
 		});
 	}
 }
@@ -764,7 +778,7 @@ function onDragover(ev) {
 	const isDriveFile = ev.dataTransfer.types[0] === _DATA_TRANSFER_DRIVE_FILE_;
 	if (isFile || isDriveFile) {
 		ev.preventDefault();
-		draghover = true;
+		draghover.value = true;
 		switch (ev.dataTransfer.effectAllowed) {
 			case "all":
 			case "uninitialized":
@@ -785,15 +799,15 @@ function onDragover(ev) {
 }
 
 function onDragenter(ev) {
-	draghover = true;
+	draghover.value = true;
 }
 
 function onDragleave(ev) {
-	draghover = false;
+	draghover.value = false;
 }
 
 function onDrop(ev): void {
-	draghover = false;
+	draghover.value = false;
 
 	// ファイルだったら
 	if (ev.dataTransfer.files.length > 0) {
@@ -806,7 +820,7 @@ function onDrop(ev): void {
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
 	if (driveFile != null && driveFile !== "") {
 		const file = JSON.parse(driveFile);
-		files.push(file);
+		files.value.push(file);
 		ev.preventDefault();
 	}
 	//#endregion
@@ -815,16 +829,16 @@ function onDrop(ev): void {
 function saveDraft() {
 	const draftData = JSON.parse(localStorage.getItem("drafts") || "{}");
 
-	draftData[draftKey] = {
+	draftData[draftKey.value] = {
 		updatedAt: new Date(),
 		data: {
-			text: text,
-			useCw: useCw,
-			cw: cw,
-			visibility: visibility,
-			localOnly: localOnly,
-			files: files,
-			poll: poll,
+			text: text.value,
+			useCw: useCw.value,
+			cw: cw.value,
+			visibility: visibility.value,
+			localOnly: localOnly.value,
+			files: files.value,
+			poll: poll.value,
 		},
 	};
 
@@ -834,37 +848,38 @@ function saveDraft() {
 function deleteDraft() {
 	const draftData = JSON.parse(localStorage.getItem("drafts") || "{}");
 
-	delete draftData[draftKey];
+	delete draftData[draftKey.value];
 
 	localStorage.setItem("drafts", JSON.stringify(draftData));
 }
 
 async function post() {
-	const processedText = preprocess(text);
+	const processedText = preprocess(text.value);
 
 	let postData = {
 		editId: props.editId ? props.editId : undefined,
 		text: processedText === "" ? undefined : processedText,
-		fileIds: files.length > 0 ? files.map((f) => f.id) : undefined,
+		fileIds:
+			files.value.length > 0 ? files.value.map((f) => f.id) : undefined,
 		replyId: props.reply ? props.reply.id : undefined,
 		renoteId: props.renote
 			? props.renote.id
-			: quoteId
-			? quoteId
+			: quoteId.value
+			? quoteId.value
 			: undefined,
 		channelId: props.channel ? props.channel.id : undefined,
-		poll: poll,
-		cw: useCw ? cw || "" : undefined,
-		localOnly: localOnly,
-		visibility: visibility,
+		poll: poll.value,
+		cw: useCw.value ? cw.value || "" : undefined,
+		localOnly: localOnly.value,
+		visibility: visibility.value,
 		visibleUserIds:
-			visibility === "specified"
-				? visibleUsers.map((u) => u.id)
+			visibility.value === "specified"
+				? visibleUsers.value.map((u) => u.id)
 				: undefined,
 	};
 
-	if (withHashtags && hashtags && hashtags.trim() !== "") {
-		const hashtags_ = hashtags
+	if (withHashtags.value && hashtags.value && hashtags.value.trim() !== "") {
+		const hashtags_ = hashtags.value
 			.trim()
 			.split(" ")
 			.map((x) => (x.startsWith("#") ? x : "#" + x))
@@ -883,12 +898,13 @@ async function post() {
 
 	let token = undefined;
 
-	if (postAccount) {
+	if (postAccount.value) {
 		const storedAccounts = await getAccounts();
-		token = storedAccounts.find((x) => x.id === postAccount.id)?.token;
+		token = storedAccounts.find((x) => x.id === postAccount.value.id)
+			?.token;
 	}
 
-	posting = true;
+	posting.value = true;
 	os.api(postData.editId ? "notes/edit" : "notes/create", postData, token)
 		.then(() => {
 			clear();
@@ -908,12 +924,12 @@ async function post() {
 						JSON.stringify(unique(hashtags_.concat(history))),
 					);
 				}
-				posting = false;
-				postAccount = null;
+				posting.value = false;
+				postAccount.value = null;
 			});
 		})
 		.catch((err) => {
-			posting = false;
+			posting.value = false;
 			os.alert({
 				type: "error",
 				text: err.message + "\n" + (err as any).id,
@@ -927,12 +943,12 @@ function cancel() {
 
 function insertMention() {
 	os.selectUser().then((user) => {
-		insertTextAtCursor(textareaEl, "@" + Acct.toString(user) + " ");
+		insertTextAtCursor(textareaEl.value, "@" + Acct.toString(user) + " ");
 	});
 }
 
 async function insertEmoji(ev: MouseEvent) {
-	os.openEmojiPicker(ev.currentTarget ?? ev.target, {}, textareaEl);
+	os.openEmojiPicker(ev.currentTarget ?? ev.target, {}, textareaEl.value);
 }
 
 async function openCheatSheet(ev: MouseEvent) {
@@ -946,11 +962,11 @@ function showActions(ev) {
 			action: () => {
 				action.handler(
 					{
-						text: text,
+						text: text.value,
 					},
 					(key, value) => {
 						if (key === "text") {
-							text = value;
+							text.value = value;
 						}
 					},
 				);
@@ -960,19 +976,19 @@ function showActions(ev) {
 	);
 }
 
-let postAccount = $ref<misskey.entities.UserDetailed | null>(null);
+let postAccount = ref<misskey.entities.UserDetailed | null>(null);
 
 function openAccountMenu(ev: MouseEvent) {
 	openAccountMenu_(
 		{
 			withExtraOperation: false,
 			includeCurrentAccount: true,
-			active: postAccount != null ? postAccount.id : $i.id,
+			active: postAccount.value != null ? postAccount.value.id : $i.id,
 			onChoose: (account) => {
 				if (account.id === $i.id) {
-					postAccount = null;
+					postAccount.value = null;
 				} else {
-					postAccount = account;
+					postAccount.value = account;
 				}
 			},
 		},
@@ -990,30 +1006,30 @@ onMounted(() => {
 	}
 
 	// TODO: detach when unmount
-	new Autocomplete(textareaEl, $$(text));
-	new Autocomplete(cwInputEl, $$(cw));
-	new Autocomplete(hashtagsInputEl, $$(hashtags));
+	new Autocomplete(textareaEl.value, text);
+	new Autocomplete(cwInputEl.value, cw);
+	new Autocomplete(hashtagsInputEl.value, hashtags);
 
-	autosize(textareaEl);
+	autosize(textareaEl.value);
 
 	nextTick(() => {
-		autosize(textareaEl);
+		autosize(textareaEl.value);
 		// 書きかけの投稿を復元
 		if (!props.instant && !props.mention && !props.specified) {
 			const draft = JSON.parse(localStorage.getItem("drafts") || "{}")[
-				draftKey
+				draftKey.value
 			];
 			if (draft) {
-				text = draft.data.text;
-				useCw = draft.data.useCw;
-				cw = draft.data.cw;
-				visibility = draft.data.visibility;
-				localOnly = draft.data.localOnly;
-				files = (draft.data.files || []).filter(
+				text.value = draft.data.text;
+				useCw.value = draft.data.useCw;
+				cw.value = draft.data.cw;
+				visibility.value = draft.data.visibility;
+				localOnly.value = draft.data.localOnly;
+				files.value = (draft.data.files || []).filter(
 					(draftFile) => draftFile,
 				);
 				if (draft.data.poll) {
-					poll = draft.data.poll;
+					poll.value = draft.data.poll;
 				}
 			}
 		}
@@ -1021,21 +1037,21 @@ onMounted(() => {
 		// 削除して編集
 		if (props.initialNote) {
 			const init = props.initialNote;
-			text = init.text ? init.text : "";
-			files = init.files;
-			cw = init.cw;
-			useCw = init.cw != null;
+			text.value = init.text ? init.text : "";
+			files.value = init.files;
+			cw.value = init.cw;
+			useCw.value = init.cw != null;
 			if (init.poll) {
-				poll = {
+				poll.value = {
 					choices: init.poll.choices.map((x) => x.text),
 					multiple: init.poll.multiple,
 					expiresAt: init.poll.expiresAt,
 					expiredAfter: init.poll.expiredAfter,
 				};
 			}
-			visibility = init.visibility;
-			localOnly = init.localOnly;
-			quoteId = init.renote ? init.renote.id : null;
+			visibility.value = init.visibility;
+			localOnly.value = init.localOnly;
+			quoteId.value = init.renote ? init.renote.id : null;
 		}
 
 		nextTick(() => watchForDraft());
diff --git a/packages/client/src/components/MkPostFormDialog.vue b/packages/client/src/components/MkPostFormDialog.vue
index c5898a1c73..9e43aef4fb 100644
--- a/packages/client/src/components/MkPostFormDialog.vue
+++ b/packages/client/src/components/MkPostFormDialog.vue
@@ -19,6 +19,8 @@
 </template>
 
 <script lang="ts" setup>
+import { shallowRef } from "vue";
+
 import {} from "vue";
 import * as misskey from "firefish-js";
 import MkModal from "@/components/MkModal.vue";
@@ -46,11 +48,11 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-let modal = $shallowRef<InstanceType<typeof MkModal>>();
-let form = $shallowRef<InstanceType<typeof MkPostForm>>();
+let modal = shallowRef<InstanceType<typeof MkModal>>();
+let form = shallowRef<InstanceType<typeof MkPostForm>>();
 
 function onPosted() {
-	modal.close({
+	modal.value.close({
 		useSendAnimation: true,
 	});
 }
diff --git a/packages/client/src/components/MkPushNotificationAllowButton.vue b/packages/client/src/components/MkPushNotificationAllowButton.vue
index 166c803f00..f911cfe41e 100644
--- a/packages/client/src/components/MkPushNotificationAllowButton.vue
+++ b/packages/client/src/components/MkPushNotificationAllowButton.vue
@@ -53,6 +53,8 @@
 </template>
 
 <script setup lang="ts">
+import { ref } from "vue";
+
 import { $i, getAccounts } from "@/account";
 import MkButton from "@/components/MkButton.vue";
 import { instance } from "@/instance";
@@ -74,12 +76,12 @@ defineProps<{
 }>();
 
 // ServiceWorker registration
-let registration = $ref<ServiceWorkerRegistration | undefined>();
+let registration = ref<ServiceWorkerRegistration | undefined>();
 // If this browser supports push notification
-let supported = $ref(false);
+let supported = ref(false);
 // If this browser has already subscribed to push notification
-let pushSubscription = $ref<PushSubscription | null>(null);
-let pushRegistrationInServer = $ref<
+let pushSubscription = ref<PushSubscription | null>(null);
+let pushRegistrationInServer = ref<
 	| {
 			state?: string;
 			key?: string;
@@ -91,11 +93,12 @@ let pushRegistrationInServer = $ref<
 >();
 
 function subscribe() {
-	if (!registration || !supported || !instance.swPublickey) return;
+	if (!registration.value || !supported.value || !instance.swPublickey)
+		return;
 
 	// SEE: https://developer.mozilla.org/en-US/docs/Web/API/PushManager/subscribe#Parameters
 	return promiseDialog(
-		registration.pushManager
+		registration.value.pushManager
 			.subscribe({
 				userVisibleOnly: true,
 				applicationServerKey: urlBase64ToUint8Array(
@@ -104,10 +107,10 @@ function subscribe() {
 			})
 			.then(
 				async (subscription) => {
-					pushSubscription = subscription;
+					pushSubscription.value = subscription;
 
 					// Register
-					pushRegistrationInServer = await api("sw/register", {
+					pushRegistrationInServer.value = await api("sw/register", {
 						endpoint: subscription.endpoint,
 						auth: encode(subscription.getKey("auth")),
 						publickey: encode(subscription.getKey("p256dh")),
@@ -136,12 +139,12 @@ function subscribe() {
 }
 
 async function unsubscribe() {
-	if (!pushSubscription) return;
+	if (!pushSubscription.value) return;
 
-	const endpoint = pushSubscription.endpoint;
+	const endpoint = pushSubscription.value.endpoint;
 	const accounts = await getAccounts();
 
-	pushRegistrationInServer = undefined;
+	pushRegistrationInServer.value = undefined;
 
 	if ($i && accounts.length >= 2) {
 		apiWithDialog("sw/unregister", {
@@ -149,11 +152,11 @@ async function unsubscribe() {
 			endpoint,
 		});
 	} else {
-		pushSubscription.unsubscribe();
+		pushSubscription.value.unsubscribe();
 		apiWithDialog("sw/unregister", {
 			endpoint,
 		});
-		pushSubscription = null;
+		pushSubscription.value = null;
 	}
 }
 
@@ -184,20 +187,21 @@ if (navigator.serviceWorker == null) {
 	// TODO: よしなに？
 } else {
 	navigator.serviceWorker.ready.then(async (swr) => {
-		registration = swr;
+		registration.value = swr;
 
-		pushSubscription = await registration.pushManager.getSubscription();
+		pushSubscription.value =
+			await registration.value.pushManager.getSubscription();
 
 		if (instance.swPublickey && "PushManager" in window && $i && $i.token) {
-			supported = true;
+			supported.value = true;
 
-			if (pushSubscription) {
+			if (pushSubscription.value) {
 				const res = await api("sw/show-registration", {
-					endpoint: pushSubscription.endpoint,
+					endpoint: pushSubscription.value.endpoint,
 				});
 
 				if (res) {
-					pushRegistrationInServer = res;
+					pushRegistrationInServer.value = res;
 				}
 			}
 		}
@@ -205,6 +209,6 @@ if (navigator.serviceWorker == null) {
 }
 
 defineExpose({
-	pushRegistrationInServer: $$(pushRegistrationInServer),
+	pushRegistrationInServer: pushRegistrationInServer,
 });
 </script>
diff --git a/packages/client/src/components/MkReactedUsers.vue b/packages/client/src/components/MkReactedUsers.vue
index 13b44943dc..ab740c8592 100644
--- a/packages/client/src/components/MkReactedUsers.vue
+++ b/packages/client/src/components/MkReactedUsers.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, watch } from "vue";
+import { onMounted, watch, ref } from "vue";
 import * as misskey from "firefish-js";
 import MkReactionIcon from "@/components/MkReactionIcon.vue";
 import MkUserCardMini from "@/components/MkUserCardMini.vue";
@@ -46,28 +46,28 @@ const props = defineProps<{
 	noteId: misskey.entities.Note["id"];
 }>();
 
-let note = $ref<misskey.entities.Note>();
-let tab = $ref<string>();
-let reactions = $ref<string[]>();
-let users = $ref();
+let note = ref<misskey.entities.Note>();
+let tab = ref<string>();
+let reactions = ref<string[]>();
+let users = ref();
 
-watch($$(tab), async () => {
+watch(tab, async () => {
 	const res = await os.api("notes/reactions", {
 		noteId: props.noteId,
-		type: tab,
+		type: tab.value,
 		limit: 30,
 	});
 
-	users = res.map((x) => x.user);
+	users.value = res.map((x) => x.user);
 });
 
 onMounted(() => {
 	os.api("notes/show", {
 		noteId: props.noteId,
 	}).then((res) => {
-		reactions = Object.keys(res.reactions);
-		tab = reactions[0];
-		note = res;
+		reactions.value = Object.keys(res.reactions);
+		tab.value = reactions.value[0];
+		note.value = res;
 	});
 });
 </script>
diff --git a/packages/client/src/components/MkRenoteButton.vue b/packages/client/src/components/MkRenoteButton.vue
index 1ce138e4dc..c008137d8c 100644
--- a/packages/client/src/components/MkRenoteButton.vue
+++ b/packages/client/src/components/MkRenoteButton.vue
@@ -70,13 +70,13 @@ useTooltip(buttonRef, async (showing) => {
 	);
 });
 
-let hasRenotedBefore = $ref(false);
+let hasRenotedBefore = ref(false);
 os.api("notes/renotes", {
 	noteId: props.note.id,
 	userId: $i.id,
 	limit: 1,
 }).then((res) => {
-	hasRenotedBefore = res.length > 0;
+	hasRenotedBefore.value = res.length > 0;
 });
 
 const renote = (viaKeyboard = false, ev?: MouseEvent) => {
@@ -94,7 +94,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
 					renoteId: props.note.id,
 					visibility: "public",
 				});
-				hasRenotedBefore = true;
+				hasRenotedBefore.value = true;
 				const el =
 					ev &&
 					((ev.currentTarget ?? ev.target) as
@@ -121,7 +121,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
 					renoteId: props.note.id,
 					visibility: "home",
 				});
-				hasRenotedBefore = true;
+				hasRenotedBefore.value = true;
 				const el =
 					ev &&
 					((ev.currentTarget ?? ev.target) as
@@ -149,7 +149,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
 					visibility: "specified",
 					visibleUserIds: props.note.visibleUserIds,
 				});
-				hasRenotedBefore = true;
+				hasRenotedBefore.value = true;
 				const el =
 					ev &&
 					((ev.currentTarget ?? ev.target) as
@@ -174,7 +174,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
 					renoteId: props.note.id,
 					visibility: "followers",
 				});
-				hasRenotedBefore = true;
+				hasRenotedBefore.value = true;
 				const el =
 					ev &&
 					((ev.currentTarget ?? ev.target) as
@@ -212,7 +212,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
 								localOnly: true,
 						  },
 				);
-				hasRenotedBefore = true;
+				hasRenotedBefore.value = true;
 				const el =
 					ev &&
 					((ev.currentTarget ?? ev.target) as
@@ -242,7 +242,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
 		});
 	}
 
-	if (hasRenotedBefore) {
+	if (hasRenotedBefore.value) {
 		buttonActions.push({
 			text: i18n.ts.unrenote,
 			icon: "ph-trash ph-bold ph-lg",
@@ -251,7 +251,7 @@ const renote = (viaKeyboard = false, ev?: MouseEvent) => {
 				os.api("notes/unrenote", {
 					noteId: props.note.id,
 				});
-				hasRenotedBefore = false;
+				hasRenotedBefore.value = false;
 			},
 		});
 	}
diff --git a/packages/client/src/components/MkSignin.vue b/packages/client/src/components/MkSignin.vue
index 17f8b9a722..b9e7a3d5cd 100644
--- a/packages/client/src/components/MkSignin.vue
+++ b/packages/client/src/components/MkSignin.vue
@@ -160,7 +160,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from "vue";
+import { defineAsyncComponent, ref, computed } from "vue";
 import { toUnicode } from "punycode/";
 import MkButton from "@/components/MkButton.vue";
 import MkInput from "@/components/form/input.vue";
@@ -172,19 +172,19 @@ import { login } from "@/account";
 import { instance } from "@/instance";
 import { i18n } from "@/i18n";
 
-let signing = $ref(false);
-let user = $ref(null);
-let username = $ref("");
-let password = $ref("");
-let token = $ref("");
-let host = $ref(toUnicode(configHost));
-let totpLogin = $ref(false);
-let challengeData = $ref(null);
-let queryingKey = $ref(false);
-let hCaptchaResponse = $ref(null);
-let reCaptchaResponse = $ref(null);
+let signing = ref(false);
+let user = ref(null);
+let username = ref("");
+let password = ref("");
+let token = ref("");
+let host = ref(toUnicode(configHost));
+let totpLogin = ref(false);
+let challengeData = ref(null);
+let queryingKey = ref(false);
+let hCaptchaResponse = ref(null);
+let reCaptchaResponse = ref(null);
 
-const meta = $computed(() => instance);
+const meta = computed(() => instance);
 
 const emit = defineEmits<{
 	(ev: "login", v: any): void;
@@ -210,13 +210,13 @@ const props = defineProps({
 
 function onUsernameChange() {
 	os.api("users/show", {
-		username: username,
+		username: username.value,
 	}).then(
 		(userResponse) => {
-			user = userResponse;
+			user.value = userResponse;
 		},
 		() => {
-			user = null;
+			user.value = null;
 		},
 	);
 }
@@ -228,38 +228,40 @@ function onLogin(res) {
 }
 
 function queryKey() {
-	queryingKey = true;
+	queryingKey.value = true;
 	return navigator.credentials
 		.get({
 			publicKey: {
-				challenge: byteify(challengeData.challenge, "base64"),
-				allowCredentials: challengeData.securityKeys.map((key) => ({
-					id: byteify(key.id, "hex"),
-					type: "public-key",
-					transports: ["usb", "nfc", "ble", "internal"],
-				})),
+				challenge: byteify(challengeData.value.challenge, "base64"),
+				allowCredentials: challengeData.value.securityKeys.map(
+					(key) => ({
+						id: byteify(key.id, "hex"),
+						type: "public-key",
+						transports: ["usb", "nfc", "ble", "internal"],
+					}),
+				),
 				timeout: 60 * 1000,
 			},
 		})
 		.catch(() => {
-			queryingKey = false;
+			queryingKey.value = false;
 			return Promise.reject(null);
 		})
 		.then((credential) => {
-			queryingKey = false;
-			signing = true;
+			queryingKey.value = false;
+			signing.value = true;
 			return os.api("signin", {
-				username,
-				password,
+				username: username.value,
+				password: password.value,
 				signature: hexify(credential.response.signature),
 				authenticatorData: hexify(
 					credential.response.authenticatorData,
 				),
 				clientDataJSON: hexify(credential.response.clientDataJSON),
 				credentialId: credential.id,
-				challengeId: challengeData.challengeId,
-				"hcaptcha-response": hCaptchaResponse,
-				"g-recaptcha-response": reCaptchaResponse,
+				challengeId: challengeData.value.challengeId,
+				"hcaptcha-response": hCaptchaResponse.value,
+				"g-recaptcha-response": reCaptchaResponse.value,
 			});
 		})
 		.then((res) => {
@@ -272,39 +274,42 @@ function queryKey() {
 				type: "error",
 				text: i18n.ts.signinFailed,
 			});
-			signing = false;
+			signing.value = false;
 		});
 }
 
 function onSubmit() {
-	signing = true;
+	signing.value = true;
 	console.log("submit");
-	if (!totpLogin && user && user.twoFactorEnabled) {
-		if (window.PublicKeyCredential && user.securityKeys) {
+	if (!totpLogin.value && user.value && user.value.twoFactorEnabled) {
+		if (window.PublicKeyCredential && user.value.securityKeys) {
 			os.api("signin", {
-				username,
-				password,
-				"hcaptcha-response": hCaptchaResponse,
-				"g-recaptcha-response": reCaptchaResponse,
+				username: username.value,
+				password: password.value,
+				"hcaptcha-response": hCaptchaResponse.value,
+				"g-recaptcha-response": reCaptchaResponse.value,
 			})
 				.then((res) => {
-					totpLogin = true;
-					signing = false;
-					challengeData = res;
+					totpLogin.value = true;
+					signing.value = false;
+					challengeData.value = res;
 					return queryKey();
 				})
 				.catch(loginFailed);
 		} else {
-			totpLogin = true;
-			signing = false;
+			totpLogin.value = true;
+			signing.value = false;
 		}
 	} else {
 		os.api("signin", {
-			username,
-			password,
-			"hcaptcha-response": hCaptchaResponse,
-			"g-recaptcha-response": reCaptchaResponse,
-			token: user && user.twoFactorEnabled ? token : undefined,
+			username: username.value,
+			password: password.value,
+			"hcaptcha-response": hCaptchaResponse.value,
+			"g-recaptcha-response": reCaptchaResponse.value,
+			token:
+				user.value && user.value.twoFactorEnabled
+					? token.value
+					: undefined,
 		})
 			.then((res) => {
 				emit("login", res);
@@ -354,9 +359,9 @@ function loginFailed(err) {
 		}
 	}
 
-	challengeData = null;
-	totpLogin = false;
-	signing = false;
+	challengeData.value = null;
+	totpLogin.value = false;
+	signing.value = false;
 }
 
 function resetPassword() {
diff --git a/packages/client/src/components/MkSigninDialog.vue b/packages/client/src/components/MkSigninDialog.vue
index acb52ea7fd..0afb1f7895 100644
--- a/packages/client/src/components/MkSigninDialog.vue
+++ b/packages/client/src/components/MkSigninDialog.vue
@@ -12,6 +12,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import {} from "vue";
 import MkSignin from "@/components/MkSignin.vue";
 import XModalWindow from "@/components/MkModalWindow.vue";
@@ -34,15 +36,15 @@ const emit = defineEmits<{
 	(ev: "cancelled"): void;
 }>();
 
-const dialog = $ref<InstanceType<typeof XModalWindow>>();
+const dialog = ref<InstanceType<typeof XModalWindow>>();
 
 function onClose() {
 	emit("cancelled");
-	dialog.close();
+	dialog.value.close();
 }
 
 function onLogin(res) {
 	emit("done", res);
-	dialog.close();
+	dialog.value.close();
 }
 </script>
diff --git a/packages/client/src/components/MkSignup.vue b/packages/client/src/components/MkSignup.vue
index 5be3a364d0..274463a578 100644
--- a/packages/client/src/components/MkSignup.vue
+++ b/packages/client/src/components/MkSignup.vue
@@ -284,6 +284,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, computed } from "vue";
+
 import getPasswordStrength from "syuilo-password-strength";
 import { toUnicode } from "punycode/";
 import MkButton from "./MkButton.vue";
@@ -312,14 +314,14 @@ const emit = defineEmits<{
 
 const host = toUnicode(config.host);
 
-let hcaptcha = $ref();
-let recaptcha = $ref();
+let hcaptcha = ref();
+let recaptcha = ref();
 
-let username: string = $ref("");
-let password: string = $ref("");
-let retypedPassword: string = $ref("");
-let invitationCode: string = $ref("");
-let email = $ref("");
+let username: string = ref("");
+let password: string = ref("");
+let retypedPassword: string = ref("");
+let invitationCode: string = ref("");
+let email = ref("");
 let usernameState:
 	| null
 	| "wait"
@@ -328,8 +330,8 @@ let usernameState:
 	| "error"
 	| "invalid-format"
 	| "min-range"
-	| "max-range" = $ref(null);
-let invitationState: null | "entered" = $ref(null);
+	| "max-range" = ref(null);
+let invitationState: null | "entered" = ref(null);
 let emailState:
 	| null
 	| "wait"
@@ -340,79 +342,79 @@ let emailState:
 	| "unavailable:mx"
 	| "unavailable:smtp"
 	| "unavailable"
-	| "error" = $ref(null);
-let passwordStrength: "" | "low" | "medium" | "high" = $ref("");
-let passwordRetypeState: null | "match" | "not-match" = $ref(null);
-let submitting: boolean = $ref(false);
-let ToSAgreement: boolean = $ref(false);
-let hCaptchaResponse = $ref(null);
-let reCaptchaResponse = $ref(null);
+	| "error" = ref(null);
+let passwordStrength: "" | "low" | "medium" | "high" = ref("");
+let passwordRetypeState: null | "match" | "not-match" = ref(null);
+let submitting: boolean = ref(false);
+let ToSAgreement: boolean = ref(false);
+let hCaptchaResponse = ref(null);
+let reCaptchaResponse = ref(null);
 
-const shouldDisableSubmitting = $computed((): boolean => {
+const shouldDisableSubmitting = computed((): boolean => {
 	return (
-		submitting ||
-		(instance.tosUrl && !ToSAgreement) ||
-		(instance.enableHcaptcha && !hCaptchaResponse) ||
-		(instance.enableRecaptcha && !reCaptchaResponse) ||
-		passwordRetypeState === "not-match"
+		submitting.value ||
+		(instance.tosUrl && !ToSAgreement.value) ||
+		(instance.enableHcaptcha && !hCaptchaResponse.value) ||
+		(instance.enableRecaptcha && !reCaptchaResponse.value) ||
+		passwordRetypeState.value === "not-match"
 	);
 });
 
 function onChangeInvitationCode(): void {
-	if (invitationCode === "") {
-		invitationState = null;
+	if (invitationCode.value === "") {
+		invitationState.value = null;
 		return;
 	}
-	invitationState = "entered";
+	invitationState.value = "entered";
 }
 
 function onChangeUsername(): void {
-	if (username === "") {
-		usernameState = null;
+	if (username.value === "") {
+		usernameState.value = null;
 		return;
 	}
 
 	{
-		const err = !username.match(/^[a-zA-Z0-9_]+$/)
+		const err = !username.value.match(/^[a-zA-Z0-9_]+$/)
 			? "invalid-format"
-			: username.length < 1
+			: username.value.length < 1
 			? "min-range"
-			: username.length > 20
+			: username.value.length > 20
 			? "max-range"
 			: null;
 
 		if (err) {
-			usernameState = err;
+			usernameState.value = err;
 			return;
 		}
 	}
 
-	usernameState = "wait";
+	usernameState.value = "wait";
 
 	os.api("username/available", {
-		username,
+		username: username.value,
 	})
 		.then((result) => {
-			usernameState = result.available ? "ok" : "unavailable";
+			usernameState.value = result.available ? "ok" : "unavailable";
 		})
 		.catch(() => {
-			usernameState = "error";
+			usernameState.value = "error";
 		});
 }
 
 function onChangeEmail(): void {
-	if (email === "") {
-		emailState = null;
+	if (email.value === "") {
+		emailState.value = null;
 		return;
 	}
 
-	emailState = "wait";
+	emailState.value = "wait";
 
 	os.api("email-address/available", {
-		emailAddress: email,
+		emailAddress: email.value,
 	})
 		.then((result) => {
-			emailState = result.available
+			emailState.value = result.available
 				? "ok"
 				: result.reason === "used"
 				? "unavailable:used"
@@ -427,54 +429,55 @@ function onChangeEmail(): void {
 				: "unavailable";
 		})
 		.catch(() => {
-			emailState = "error";
+			emailState.value = "error";
 		});
 }
 
 function onChangePassword(): void {
-	if (password === "") {
-		passwordStrength = "";
+	if (password.value === "") {
+		passwordStrength.value = "";
 		return;
 	}
 
-	const strength = getPasswordStrength(password);
-	passwordStrength =
+	const strength = getPasswordStrength(password.value);
+	passwordStrength.value =
 		strength > 0.7 ? "high" : strength > 0.3 ? "medium" : "low";
 }
 
 function onChangePasswordRetype(): void {
-	if (retypedPassword === "") {
-		passwordRetypeState = null;
+	if (retypedPassword.value === "") {
+		passwordRetypeState.value = null;
 		return;
 	}
 
-	passwordRetypeState = password === retypedPassword ? "match" : "not-match";
+	passwordRetypeState.value =
+		password.value === retypedPassword.value ? "match" : "not-match";
 }
 
 function onSubmit(): void {
-	if (submitting) return;
-	submitting = true;
+	if (submitting.value) return;
+	submitting.value = true;
 
 	os.api("signup", {
-		username,
-		password,
-		emailAddress: email,
-		invitationCode,
-		"hcaptcha-response": hCaptchaResponse,
-		"g-recaptcha-response": reCaptchaResponse,
+		username: username.value,
+		password: password.value,
+		emailAddress: email.value,
+		invitationCode: invitationCode.value,
+		"hcaptcha-response": hCaptchaResponse.value,
+		"g-recaptcha-response": reCaptchaResponse.value,
 	})
 		.then(() => {
 			if (instance.emailRequiredForSignup) {
 				os.alert({
 					type: "success",
 					title: i18n.ts._signup.almostThere,
-					text: i18n.t("_signup.emailSent", { email }),
+					text: i18n.t("_signup.emailSent", { email: email.value }),
 				});
 				emit("signupEmailPending");
 			} else {
 				os.api("signin", {
-					username,
-					password,
+					username: username.value,
+					password: password.value,
 				}).then((res) => {
 					emit("signup", res);
 
@@ -485,9 +488,9 @@ function onSubmit(): void {
 			}
 		})
 		.catch(() => {
-			submitting = false;
-			hcaptcha.reset?.();
-			recaptcha.reset?.();
+			submitting.value = false;
+			hcaptcha.value.reset?.();
+			recaptcha.value.reset?.();
 
 			os.alert({
 				type: "error",
diff --git a/packages/client/src/components/MkSignupDialog.vue b/packages/client/src/components/MkSignupDialog.vue
index 8a499106af..9024d6fc59 100644
--- a/packages/client/src/components/MkSignupDialog.vue
+++ b/packages/client/src/components/MkSignupDialog.vue
@@ -20,6 +20,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import XSignup from "@/components/MkSignup.vue";
 import XModalWindow from "@/components/MkModalWindow.vue";
 import { i18n } from "@/i18n";
@@ -38,14 +40,14 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-const dialog = $ref<InstanceType<typeof XModalWindow>>();
+const dialog = ref<InstanceType<typeof XModalWindow>>();
 
 function onSignup(res) {
 	emit("done", res);
-	dialog?.close();
+	dialog.value?.close();
 }
 
 function onSignupEmailPending() {
-	dialog?.close();
+	dialog.value?.close();
 }
 </script>
diff --git a/packages/client/src/components/MkSubNoteContent.vue b/packages/client/src/components/MkSubNoteContent.vue
index ae7544b7c0..2ffc9483b7 100644
--- a/packages/client/src/components/MkSubNoteContent.vue
+++ b/packages/client/src/components/MkSubNoteContent.vue
@@ -217,23 +217,23 @@ const isLong =
 		(props.note.text.split("\n").length > 10 ||
 			props.note.text.length > 800)) ||
 		props.note.files.length > 4);
-const collapsed = $ref(props.note.cw == null && isLong);
+const collapsed = ref(props.note.cw == null && isLong);
 const urls = props.note.text
 	? extractUrlFromMfm(mfm.parse(props.note.text)).slice(0, 5)
 	: null;
 
-let showContent = $ref(false);
+let showContent = ref(false);
 
 const mfms = props.note.text
 	? extractMfmWithAnimation(mfm.parse(props.note.text))
 	: null;
 
-const hasMfm = $ref(mfms && mfms.length > 0);
+const hasMfm = ref(mfms && mfms.length > 0);
 
-let disableMfm = $ref(defaultStore.state.animatedMfm);
+let disableMfm = ref(defaultStore.state.animatedMfm);
 
 async function toggleMfm() {
-	if (disableMfm) {
+	if (disableMfm.value) {
 		if (!defaultStore.state.animatedMfmWarnShown) {
 			const { canceled } = await os.confirm({
 				type: "warning",
@@ -244,9 +244,9 @@ async function toggleMfm() {
 			defaultStore.set("animatedMfmWarnShown", true);
 		}
 
-		disableMfm = false;
+		disableMfm.value = false;
 	} else {
-		disableMfm = true;
+		disableMfm.value = true;
 	}
 }
 
diff --git a/packages/client/src/components/MkTagCloud.vue b/packages/client/src/components/MkTagCloud.vue
index b1ee057cc9..41db861616 100644
--- a/packages/client/src/components/MkTagCloud.vue
+++ b/packages/client/src/components/MkTagCloud.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, watch, onBeforeUnmount } from "vue";
+import { onMounted, watch, onBeforeUnmount, ref } from "vue";
 import tinycolor from "tinycolor2";
 
 const loaded = !!window.TagCanvas;
@@ -39,13 +39,13 @@ const idForTags = Array.from(Array(16))
 			],
 	)
 	.join("");
-let available = $ref(false);
-let rootEl = $ref<HTMLElement | null>(null);
-let canvasEl = $ref<HTMLCanvasElement | null>(null);
-let tagsEl = $ref<HTMLElement | null>(null);
-let width = $ref(300);
+let available = ref(false);
+let rootEl = ref<HTMLElement | null>(null);
+let canvasEl = ref<HTMLCanvasElement | null>(null);
+let tagsEl = ref<HTMLElement | null>(null);
+let width = ref(300);
 
-watch($$(available), () => {
+watch(available, () => {
 	try {
 		window.TagCanvas.Start(idForCanvas, idForTags, {
 			textColour: "#ffffff",
@@ -70,10 +70,10 @@ watch($$(available), () => {
 });
 
 onMounted(() => {
-	width = rootEl.offsetWidth;
+	width.value = rootEl.value.offsetWidth;
 
 	if (loaded) {
-		available = true;
+		available.value = true;
 	} else {
 		document.head
 			.appendChild(
@@ -82,7 +82,7 @@ onMounted(() => {
 					src: "/client-assets/tagcanvas.min.js",
 				}),
 			)
-			.addEventListener("load", () => (available = true));
+			.addEventListener("load", () => (available.value = true));
 	}
 });
 
diff --git a/packages/client/src/components/MkTimeline.vue b/packages/client/src/components/MkTimeline.vue
index f85f031213..8f7808694f 100644
--- a/packages/client/src/components/MkTimeline.vue
+++ b/packages/client/src/components/MkTimeline.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, provide, onUnmounted } from "vue";
+import { computed, provide, onUnmounted, ref } from "vue";
 import XNotes from "@/components/MkNotes.vue";
 import MkInfo from "@/components/MkInfo.vue";
 import { stream } from "@/stream";
@@ -45,7 +45,7 @@ const props = defineProps<{
 	sound?: boolean;
 }>();
 
-let queue = $ref(0);
+let queue = ref(0);
 
 const emit = defineEmits<{
 	(ev: "note"): void;
@@ -57,10 +57,10 @@ provide(
 	computed(() => props.src === "channel"),
 );
 
-const tlComponent: InstanceType<typeof XNotes> = $ref();
+const tlComponent: InstanceType<typeof XNotes> = ref();
 
 const prepend = (note) => {
-	tlComponent.pagingComponent?.prepend(note);
+	tlComponent.value.pagingComponent?.prepend(note);
 
 	emit("note");
 
@@ -70,16 +70,16 @@ const prepend = (note) => {
 };
 
 const onUserAdded = () => {
-	tlComponent.pagingComponent?.reload();
+	tlComponent.value.pagingComponent?.reload();
 };
 
 const onUserRemoved = () => {
-	tlComponent.pagingComponent?.reload();
+	tlComponent.value.pagingComponent?.reload();
 };
 
 const onChangeFollowing = () => {
-	if (!tlComponent.pagingComponent?.backed) {
-		tlComponent.pagingComponent?.reload();
+	if (!tlComponent.value.pagingComponent?.backed) {
+		tlComponent.value.pagingComponent?.reload();
 	}
 };
 
diff --git a/packages/client/src/components/MkToast.vue b/packages/client/src/components/MkToast.vue
index 1c5d2f7955..a068202532 100644
--- a/packages/client/src/components/MkToast.vue
+++ b/packages/client/src/components/MkToast.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import * as os from "@/os";
 
 defineProps<{
@@ -30,11 +30,11 @@ const emit = defineEmits<{
 }>();
 
 const zIndex = os.claimZIndex("high");
-let showing = $ref(true);
+let showing = ref(true);
 
 onMounted(() => {
 	window.setTimeout(() => {
-		showing = false;
+		showing.value = false;
 	}, 4000);
 });
 </script>
diff --git a/packages/client/src/components/MkTokenGenerateWindow.vue b/packages/client/src/components/MkTokenGenerateWindow.vue
index 853185e41e..6386f6c6d0 100644
--- a/packages/client/src/components/MkTokenGenerateWindow.vue
+++ b/packages/client/src/components/MkTokenGenerateWindow.vue
@@ -43,6 +43,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import {} from "vue";
 import { permissions as kinds } from "firefish-js";
 import MkInput from "./form/input.vue";
@@ -72,37 +74,39 @@ const emit = defineEmits<{
 	(ev: "done", result: { name: string | null; permissions: string[] }): void;
 }>();
 
-const dialog = $ref<InstanceType<typeof XModalWindow>>();
-let name = $ref(props.initialName);
-let permissions = $ref({});
+const dialog = ref<InstanceType<typeof XModalWindow>>();
+let name = ref(props.initialName);
+let permissions = ref({});
 
 if (props.initialPermissions) {
 	for (const kind of props.initialPermissions) {
-		permissions[kind] = true;
+		permissions.value[kind] = true;
 	}
 } else {
 	for (const kind of kinds) {
-		permissions[kind] = false;
+		permissions.value[kind] = false;
 	}
 }
 
 function ok(): void {
 	emit("done", {
-		name: name,
-		permissions: Object.keys(permissions).filter((p) => permissions[p]),
+		name: name.value,
+		permissions: Object.keys(permissions.value).filter(
+			(p) => permissions.value[p],
+		),
 	});
-	dialog.close();
+	dialog.value.close();
 }
 
 function disableAll(): void {
-	for (const p in permissions) {
-		permissions[p] = false;
+	for (const p in permissions.value) {
+		permissions.value[p] = false;
 	}
 }
 
 function enableAll(): void {
-	for (const p in permissions) {
-		permissions[p] = true;
+	for (const p in permissions.value) {
+		permissions.value[p] = true;
 	}
 }
 </script>
diff --git a/packages/client/src/components/MkTutorialDialog.vue b/packages/client/src/components/MkTutorialDialog.vue
index 369ec122df..1c5ec315dc 100644
--- a/packages/client/src/components/MkTutorialDialog.vue
+++ b/packages/client/src/components/MkTutorialDialog.vue
@@ -206,7 +206,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import XSettings from "@/pages/settings/profile.vue";
 import XModalWindow from "@/components/MkModalWindow.vue";
 import MkButton from "@/components/MkButton.vue";
@@ -250,7 +250,7 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-const dialog = $ref<InstanceType<typeof XModalWindow>>();
+const dialog = ref<InstanceType<typeof XModalWindow>>();
 
 const tutorial = computed({
 	get() {
@@ -278,7 +278,7 @@ const reduceAnimation = computed(
 
 function close(res) {
 	tutorial.value = -1;
-	dialog.close();
+	dialog.value.close();
 }
 </script>
 
diff --git a/packages/client/src/components/MkUpdated.vue b/packages/client/src/components/MkUpdated.vue
index d63ba96608..bd62d8e227 100644
--- a/packages/client/src/components/MkUpdated.vue
+++ b/packages/client/src/components/MkUpdated.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts" setup>
-import { shallowRef } from "vue";
+import { shallowRef, ref } from "vue";
 import MkModal from "@/components/MkModal.vue";
 import MkSparkle from "@/components/MkSparkle.vue";
 import MkButton from "@/components/MkButton.vue";
@@ -43,18 +43,18 @@ import * as os from "@/os";
 
 const modal = shallowRef<InstanceType<typeof MkModal>>();
 
-let newRelease = $ref(false);
-let data = $ref(Object);
+let newRelease = ref(false);
+let data = ref(Object);
 
 os.api("release").then((res) => {
-	data = res;
-	newRelease = version === data?.version;
+	data.value = res;
+	newRelease.value = version === data.value?.version;
 });
 
 console.log(`Version: ${version}`);
-console.log(`Data version: ${data.version}`);
-console.log(newRelease);
-console.log(data);
+console.log(`Data version: ${data.value.version}`);
+console.log(newRelease.value);
+console.log(data.value);
 </script>
 
 <style lang="scss" module>
diff --git a/packages/client/src/components/MkUrlPreview.vue b/packages/client/src/components/MkUrlPreview.vue
index 3591cb91a8..4e37805986 100644
--- a/packages/client/src/components/MkUrlPreview.vue
+++ b/packages/client/src/components/MkUrlPreview.vue
@@ -99,7 +99,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted } from "vue";
+import { onUnmounted, ref } from "vue";
 import { url as local, lang } from "@/config";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
@@ -117,22 +117,22 @@ const props = withDefaults(
 const self = props.url.startsWith(local);
 const attr = self ? "to" : "href";
 const target = self ? null : "_blank";
-let fetching = $ref(true);
-let title = $ref<string | null>(null);
-let description = $ref<string | null>(null);
-let thumbnail = $ref<string | null>(null);
-let icon = $ref<string | null>(null);
-let sitename = $ref<string | null>(null);
-let player = $ref({
+let fetching = ref(true);
+let title = ref<string | null>(null);
+let description = ref<string | null>(null);
+let thumbnail = ref<string | null>(null);
+let icon = ref<string | null>(null);
+let sitename = ref<string | null>(null);
+let player = ref({
 	url: null,
 	width: null,
 	height: null,
 });
-let playerEnabled = $ref(false);
-let tweetId = $ref<string | null>(null);
-let tweetExpanded = $ref(props.detail);
+let playerEnabled = ref(false);
+let tweetId = ref<string | null>(null);
+let tweetExpanded = ref(props.detail);
 const embedId = `embed${Math.random().toString().replace(/\D/, "")}`;
-let tweetHeight = $ref(150);
+let tweetHeight = ref(150);
 
 const requestUrl = new URL(props.url);
 if (!["http:", "https:"].includes(requestUrl.protocol))
@@ -143,7 +143,7 @@ if (
 	requestUrl.hostname === "mobile.twitter.com"
 ) {
 	const m = requestUrl.pathname.match(/^\/.+\/status(?:es)?\/(\d+)/);
-	if (m) tweetId = m[1];
+	if (m) tweetId.value = m[1];
 }
 
 if (
@@ -162,13 +162,13 @@ fetch(
 ).then((res) => {
 	res.json().then((info) => {
 		if (info.url == null) return;
-		title = info.title;
-		description = info.description;
-		thumbnail = info.thumbnail;
-		icon = info.icon;
-		sitename = info.sitename;
-		fetching = false;
-		player = info.player;
+		title.value = info.title;
+		description.value = info.description;
+		thumbnail.value = info.thumbnail;
+		icon.value = info.icon;
+		sitename.value = info.sitename;
+		fetching.value = false;
+		player.value = info.player;
 	});
 });
 
@@ -178,7 +178,7 @@ function adjustTweetHeight(message: any) {
 	if (embed?.method !== "twttr.private.resize") return;
 	if (embed?.id !== embedId) return;
 	const height = embed?.params[0]?.height;
-	if (height) tweetHeight = height;
+	if (height) tweetHeight.value = height;
 }
 
 (window as any).addEventListener("message", adjustTweetHeight);
diff --git a/packages/client/src/components/MkUrlPreviewPopup.vue b/packages/client/src/components/MkUrlPreviewPopup.vue
index 76d0143133..aaaf9ad7db 100644
--- a/packages/client/src/components/MkUrlPreviewPopup.vue
+++ b/packages/client/src/components/MkUrlPreviewPopup.vue
@@ -13,7 +13,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import MkUrlPreview from "@/components/MkUrlPreview.vue";
 import * as os from "@/os";
 
@@ -28,8 +28,8 @@ const emit = defineEmits<{
 }>();
 
 const zIndex = os.claimZIndex("middle");
-let top = $ref(0);
-let left = $ref(0);
+let top = ref(0);
+let left = ref(0);
 
 onMounted(() => {
 	const rect = props.source.getBoundingClientRect();
@@ -38,8 +38,8 @@ onMounted(() => {
 		window.pageXOffset;
 	const y = rect.top + props.source.offsetHeight + window.pageYOffset;
 
-	top = y;
-	left = x;
+	top.value = y;
+	left.value = x;
 });
 </script>
 
diff --git a/packages/client/src/components/MkUserCardMini.vue b/packages/client/src/components/MkUserCardMini.vue
index 30bbaa1ac2..9ab9237b29 100644
--- a/packages/client/src/components/MkUserCardMini.vue
+++ b/packages/client/src/components/MkUserCardMini.vue
@@ -24,6 +24,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import * as misskey from "firefish-js";
 import MkMiniChart from "@/components/MkMiniChart.vue";
 import * as os from "@/os";
@@ -41,7 +43,7 @@ const props = withDefaults(
 	},
 );
 
-let chartValues = $ref<number[] | null>(null);
+let chartValues = ref<number[] | null>(null);
 
 if (props.withChart) {
 	os.apiGet("charts/user/notes", {
@@ -51,7 +53,7 @@ if (props.withChart) {
 	}).then((res) => {
 		// 今日のぶんの値はまだ途中の値であり、それも含めると大抵の場合前日よりも下降しているようなグラフになってしまうため今日は弾く
 		res.inc.splice(0, 1);
-		chartValues = res.inc;
+		chartValues.value = res.inc;
 	});
 }
 </script>
diff --git a/packages/client/src/components/MkUserInfo.vue b/packages/client/src/components/MkUserInfo.vue
index d2c189be5d..784211057f 100644
--- a/packages/client/src/components/MkUserInfo.vue
+++ b/packages/client/src/components/MkUserInfo.vue
@@ -86,6 +86,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import * as misskey from "firefish-js";
 import MkFollowButton from "@/components/MkFollowButton.vue";
 import XShowMoreButton from "@/components/MkShowMoreButton.vue";
@@ -98,13 +100,13 @@ const props = defineProps<{
 	detailed?: boolean;
 }>();
 
-let isLong = $ref(
+let isLong = ref(
 	props.detailed &&
 		props.user.description &&
 		(props.user.description.split("\n").length > 9 ||
 			props.user.description.length > 400),
 );
-let collapsed = $ref(isLong);
+let collapsed = ref(isLong.value);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/components/MkUserOnlineIndicator.vue b/packages/client/src/components/MkUserOnlineIndicator.vue
index 4c02e12434..f219988d79 100644
--- a/packages/client/src/components/MkUserOnlineIndicator.vue
+++ b/packages/client/src/components/MkUserOnlineIndicator.vue
@@ -3,6 +3,8 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from "vue";
+
 import * as misskey from "firefish-js";
 import { i18n } from "@/i18n";
 
@@ -10,7 +12,7 @@ const props = defineProps<{
 	user: misskey.entities.User;
 }>();
 
-const text = $computed(() => {
+const text = computed(() => {
 	switch (props.user.onlineStatus) {
 		case "online":
 			return i18n.ts.online;
diff --git a/packages/client/src/components/MkUserPreview.vue b/packages/client/src/components/MkUserPreview.vue
index 167355dbd1..dd195947a9 100644
--- a/packages/client/src/components/MkUserPreview.vue
+++ b/packages/client/src/components/MkUserPreview.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import MkUserInfo from "@/components/MkUserInfo.vue";
 import * as Acct from "firefish-js/built/acct";
 import type * as misskey from "firefish-js";
@@ -47,13 +47,13 @@ const emit = defineEmits<{
 }>();
 
 const zIndex = os.claimZIndex("middle");
-let user = $ref<misskey.entities.UserDetailed | null>(null);
-let top = $ref(0);
-let left = $ref(0);
+let user = ref<misskey.entities.UserDetailed | null>(null);
+let top = ref(0);
+let left = ref(0);
 
 onMounted(() => {
 	if (typeof props.q === "object") {
-		user = props.q;
+		user.value = props.q;
 	} else {
 		const query = props.q.startsWith("@")
 			? Acct.parse(props.q.slice(1))
@@ -61,7 +61,7 @@ onMounted(() => {
 
 		os.api("users/show", query).then((res) => {
 			if (!props.showing) return;
-			user = res;
+			user.value = res;
 		});
 	}
 
@@ -70,8 +70,8 @@ onMounted(() => {
 		rect.left + props.source.offsetWidth / 2 - 300 / 2 + window.pageXOffset;
 	const y = rect.top + props.source.offsetHeight + window.pageYOffset;
 
-	top = y;
-	left = x;
+	top.value = y;
+	left.value = x;
 });
 </script>
 
diff --git a/packages/client/src/components/MkUserSelectDialog.vue b/packages/client/src/components/MkUserSelectDialog.vue
index ed5c1cfe47..458e9a4bd6 100644
--- a/packages/client/src/components/MkUserSelectDialog.vue
+++ b/packages/client/src/components/MkUserSelectDialog.vue
@@ -88,7 +88,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import * as misskey from "firefish-js";
 import MkInput from "@/components/form/input.vue";
 import FormSplit from "@/components/form/split.vue";
@@ -103,50 +103,50 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-let username = $ref("");
-let host = $ref("");
-let users: misskey.entities.UserDetailed[] = $ref([]);
-let recentUsers: misskey.entities.UserDetailed[] = $ref([]);
-let selected: misskey.entities.UserDetailed | null = $ref(null);
-let dialogEl = $ref();
+let username = ref("");
+let host = ref("");
+let users: misskey.entities.UserDetailed[] = ref([]);
+let recentUsers: misskey.entities.UserDetailed[] = ref([]);
+let selected: misskey.entities.UserDetailed | null = ref(null);
+let dialogEl = ref();
 
 const search = () => {
-	if (username === "" && host === "") {
-		users = [];
+	if (username.value === "" && host.value === "") {
+		users.value = [];
 		return;
 	}
 	os.api("users/search-by-username-and-host", {
-		username: username,
-		host: host,
+		username: username.value,
+		host: host.value,
 		limit: 10,
 		detail: false,
 	}).then((_users) => {
-		users = _users;
+		users.value = _users;
 	});
 };
 
 const ok = () => {
-	if (selected == null) return;
-	emit("ok", selected);
-	dialogEl.close();
+	if (selected.value == null) return;
+	emit("ok", selected.value);
+	dialogEl.value.close();
 
 	// 最近使ったユーザー更新
 	let recents = defaultStore.state.recentlyUsedUsers;
-	recents = recents.filter((x) => x !== selected.id);
-	recents.unshift(selected.id);
+	recents = recents.filter((x) => x !== selected.value.id);
+	recents.unshift(selected.value.id);
 	defaultStore.set("recentlyUsedUsers", recents.splice(0, 16));
 };
 
 const cancel = () => {
 	emit("cancel");
-	dialogEl.close();
+	dialogEl.value.close();
 };
 
 onMounted(() => {
 	os.api("users/show", {
 		userIds: defaultStore.state.recentlyUsedUsers,
 	}).then((users) => {
-		recentUsers = users;
+		recentUsers.value = users;
 	});
 });
 </script>
diff --git a/packages/client/src/components/MkUserSelectLocalDialog.vue b/packages/client/src/components/MkUserSelectLocalDialog.vue
index 3572b110fb..595e61c3b6 100644
--- a/packages/client/src/components/MkUserSelectLocalDialog.vue
+++ b/packages/client/src/components/MkUserSelectLocalDialog.vue
@@ -84,7 +84,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import * as misskey from "firefish-js";
 import MkInput from "@/components/form/input.vue";
 import FormSplit from "@/components/form/split.vue";
@@ -99,49 +99,49 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-let username = $ref("");
-let users: misskey.entities.UserDetailed[] = $ref([]);
-let recentUsers: misskey.entities.UserDetailed[] = $ref([]);
-let selected: misskey.entities.UserDetailed | null = $ref(null);
-let dialogEl = $ref();
+let username = ref("");
+let users: misskey.entities.UserDetailed[] = ref([]);
+let recentUsers: misskey.entities.UserDetailed[] = ref([]);
+let selected: misskey.entities.UserDetailed | null = ref(null);
+let dialogEl = ref();
 
 const search = () => {
-	if (username === "") {
-		users = [];
+	if (username.value === "") {
+		users.value = [];
 		return;
 	}
 	os.api("users/search", {
-		query: username,
+		query: username.value,
 		origin: "local",
 		limit: 10,
 		detail: false,
 	}).then((_users) => {
-		users = _users;
+		users.value = _users;
 	});
 };
 
 const ok = () => {
-	if (selected == null) return;
-	emit("ok", selected);
-	dialogEl.close();
+	if (selected.value == null) return;
+	emit("ok", selected.value);
+	dialogEl.value.close();
 
 	// 最近使ったユーザー更新
 	let recents = defaultStore.state.recentlyUsedUsers;
-	recents = recents.filter((x) => x !== selected.id);
-	recents.unshift(selected.id);
+	recents = recents.filter((x) => x !== selected.value.id);
+	recents.unshift(selected.value.id);
 	defaultStore.set("recentlyUsedUsers", recents.splice(0, 16));
 };
 
 const cancel = () => {
 	emit("cancel");
-	dialogEl.close();
+	dialogEl.value.close();
 };
 
 onMounted(() => {
 	os.api("users/show", {
 		userIds: defaultStore.state.recentlyUsedUsers,
 	}).then((users) => {
-		recentUsers = users;
+		recentUsers.value = users;
 	});
 });
 </script>
diff --git a/packages/client/src/components/MkVisibility.vue b/packages/client/src/components/MkVisibility.vue
index 1556f9cc0f..fb7c472f94 100644
--- a/packages/client/src/components/MkVisibility.vue
+++ b/packages/client/src/components/MkVisibility.vue
@@ -25,6 +25,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import XDetails from "@/components/MkUsersTooltip.vue";
 import * as os from "@/os";
 import { useTooltip } from "@/scripts/use-tooltip";
@@ -38,10 +40,10 @@ const props = defineProps<{
 	};
 }>();
 
-const specified = $ref<HTMLElement>();
+const specified = ref<HTMLElement>();
 
 if (props.note.visibility === "specified") {
-	useTooltip($$(specified), async (showing) => {
+	useTooltip(specified, async (showing) => {
 		const users = await os.api("users/show", {
 			userIds: props.note.visibleUserIds,
 			limit: 10,
@@ -53,7 +55,7 @@ if (props.note.visibility === "specified") {
 				showing,
 				users,
 				count: props.note.visibleUserIds.length,
-				targetElement: specified,
+				targetElement: specified.value,
 			},
 			{},
 			"closed",
diff --git a/packages/client/src/components/MkVisibilityPicker.vue b/packages/client/src/components/MkVisibilityPicker.vue
index 3cb6e99c34..e44b5b71e2 100644
--- a/packages/client/src/components/MkVisibilityPicker.vue
+++ b/packages/client/src/components/MkVisibilityPicker.vue
@@ -122,12 +122,12 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, watch } from "vue";
+import { nextTick, watch, shallowRef, ref } from "vue";
 import * as misskey from "firefish-js";
 import MkModal from "@/components/MkModal.vue";
 import { i18n } from "@/i18n";
 
-const modal = $shallowRef<InstanceType<typeof MkModal>>();
+const modal = shallowRef<InstanceType<typeof MkModal>>();
 
 const props = withDefaults(
 	defineProps<{
@@ -147,18 +147,18 @@ const emit = defineEmits<{
 	(ev: "closed"): void;
 }>();
 
-let v = $ref(props.currentVisibility);
-let localOnly = $ref(props.currentLocalOnly);
+let v = ref(props.currentVisibility);
+let localOnly = ref(props.currentLocalOnly);
 
-watch($$(localOnly), () => {
-	emit("changeLocalOnly", localOnly);
+watch(localOnly, () => {
+	emit("changeLocalOnly", localOnly.value);
 });
 
 function choose(visibility: (typeof misskey.noteVisibilities)[number]): void {
-	v = visibility;
+	v.value = visibility;
 	emit("changeVisibility", visibility);
 	nextTick(() => {
-		modal.close();
+		modal.value.close();
 	});
 }
 </script>
diff --git a/packages/client/src/components/MkWindow.vue b/packages/client/src/components/MkWindow.vue
index bb7c376d5b..7f80b7f888 100644
--- a/packages/client/src/components/MkWindow.vue
+++ b/packages/client/src/components/MkWindow.vue
@@ -115,7 +115,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted, provide } from "vue";
+import { onBeforeUnmount, onMounted, provide, ref } from "vue";
 import contains from "@/scripts/contains";
 import * as os from "@/os";
 import { MenuItem } from "@/types/menu";
@@ -170,17 +170,17 @@ const emit = defineEmits<{
 
 provide("inWindow", true);
 
-let rootEl = $ref<HTMLElement | null>();
-let showing = $ref(true);
+let rootEl = ref<HTMLElement | null>();
+let showing = ref(true);
 let beforeClickedAt = 0;
-let maximized = $ref(false);
+let maximized = ref(false);
 let unMaximizedTop = "";
 let unMaximizedLeft = "";
 let unMaximizedWidth = "";
 let unMaximizedHeight = "";
 
 function close() {
-	showing = false;
+	showing.value = false;
 }
 
 function onKeydown(evt) {
@@ -200,29 +200,31 @@ function onContextmenu(ev: MouseEvent) {
 
 // 最前面へ移動
 function top() {
-	if (rootEl) {
-		rootEl.style.zIndex = os.claimZIndex(props.front ? "middle" : "low");
+	if (rootEl.value) {
+		rootEl.value.style.zIndex = os.claimZIndex(
+			props.front ? "middle" : "low",
+		);
 	}
 }
 
 function maximize() {
-	maximized = true;
-	unMaximizedTop = rootEl.style.top;
-	unMaximizedLeft = rootEl.style.left;
-	unMaximizedWidth = rootEl.style.width;
-	unMaximizedHeight = rootEl.style.height;
-	rootEl.style.top = "0";
-	rootEl.style.left = "0";
-	rootEl.style.width = "100%";
-	rootEl.style.height = "100%";
+	maximized.value = true;
+	unMaximizedTop = rootEl.value.style.top;
+	unMaximizedLeft = rootEl.value.style.left;
+	unMaximizedWidth = rootEl.value.style.width;
+	unMaximizedHeight = rootEl.value.style.height;
+	rootEl.value.style.top = "0";
+	rootEl.value.style.left = "0";
+	rootEl.value.style.width = "100%";
+	rootEl.value.style.height = "100%";
 }
 
 function unMaximize() {
-	maximized = false;
-	rootEl.style.top = unMaximizedTop;
-	rootEl.style.left = unMaximizedLeft;
-	rootEl.style.width = unMaximizedWidth;
-	rootEl.style.height = unMaximizedHeight;
+	maximized.value = false;
+	rootEl.value.style.top = unMaximizedTop;
+	rootEl.value.style.left = unMaximizedLeft;
+	rootEl.value.style.width = unMaximizedWidth;
+	rootEl.value.style.height = unMaximizedHeight;
 }
 
 function onBodyMousedown() {
@@ -239,7 +241,7 @@ function onHeaderMousedown(evt: MouseEvent) {
 
 	let beforeMaximized = false;
 
-	if (maximized) {
+	if (maximized.value) {
 		beforeMaximized = true;
 		unMaximize();
 	}
@@ -253,7 +255,7 @@ function onHeaderMousedown(evt: MouseEvent) {
 
 	beforeClickedAt = Date.now();
 
-	const main = rootEl;
+	const main = rootEl.value;
 	if (main == null) return;
 
 	if (!contains(main, document.activeElement)) main.focus();
@@ -295,8 +297,8 @@ function onHeaderMousedown(evt: MouseEvent) {
 		if (moveLeft + windowWidth > browserWidth)
 			moveLeft = browserWidth - windowWidth;
 
-		rootEl.style.left = moveLeft + "px";
-		rootEl.style.top = moveTop + "px";
+		rootEl.value.style.left = moveLeft + "px";
+		rootEl.value.style.top = moveTop + "px";
 	}
 
 	if (beforeMaximized) {
@@ -320,7 +322,7 @@ function onHeaderMousedown(evt: MouseEvent) {
 
 // 上ハンドル掴み時
 function onTopHandleMousedown(evt) {
-	const main = rootEl;
+	const main = rootEl.value;
 
 	const base = evt.clientY;
 	const height = parseInt(getComputedStyle(main, "").height, 10);
@@ -348,7 +350,7 @@ function onTopHandleMousedown(evt) {
 
 // 右ハンドル掴み時
 function onRightHandleMousedown(evt) {
-	const main = rootEl;
+	const main = rootEl.value;
 
 	const base = evt.clientX;
 	const width = parseInt(getComputedStyle(main, "").width, 10);
@@ -374,7 +376,7 @@ function onRightHandleMousedown(evt) {
 
 // 下ハンドル掴み時
 function onBottomHandleMousedown(evt) {
-	const main = rootEl;
+	const main = rootEl.value;
 
 	const base = evt.clientY;
 	const height = parseInt(getComputedStyle(main, "").height, 10);
@@ -400,7 +402,7 @@ function onBottomHandleMousedown(evt) {
 
 // 左ハンドル掴み時
 function onLeftHandleMousedown(evt) {
-	const main = rootEl;
+	const main = rootEl.value;
 
 	const base = evt.clientX;
 	const width = parseInt(getComputedStyle(main, "").width, 10);
@@ -453,27 +455,27 @@ function onBottomLeftHandleMousedown(evt) {
 // 高さを適用
 function applyTransformHeight(height) {
 	if (height > window.innerHeight) height = window.innerHeight;
-	rootEl.style.height = height + "px";
+	rootEl.value.style.height = height + "px";
 }
 
 // 幅を適用
 function applyTransformWidth(width) {
 	if (width > window.innerWidth) width = window.innerWidth;
-	rootEl.style.width = width + "px";
+	rootEl.value.style.width = width + "px";
 }
 
 // Y座標を適用
 function applyTransformTop(top) {
-	rootEl.style.top = top + "px";
+	rootEl.value.style.top = top + "px";
 }
 
 // X座標を適用
 function applyTransformLeft(left) {
-	rootEl.style.left = left + "px";
+	rootEl.value.style.left = left + "px";
 }
 
 function onBrowserResize() {
-	const main = rootEl;
+	const main = rootEl.value;
 	const position = main.getBoundingClientRect();
 	const browserWidth = window.innerWidth;
 	const browserHeight = window.innerHeight;
@@ -491,8 +493,8 @@ onMounted(() => {
 	if (props.initialWidth) applyTransformWidth(props.initialWidth);
 	if (props.initialHeight) applyTransformHeight(props.initialHeight);
 
-	applyTransformTop(window.innerHeight / 2 - rootEl.offsetHeight / 2);
-	applyTransformLeft(window.innerWidth / 2 - rootEl.offsetWidth / 2);
+	applyTransformTop(window.innerHeight / 2 - rootEl.value.offsetHeight / 2);
+	applyTransformLeft(window.innerWidth / 2 - rootEl.value.offsetWidth / 2);
 
 	// 他のウィンドウ内のボタンなどを押してこのウィンドウが開かれた場合、親が最前面になろうとするのでそれに隠されないようにする
 	top();
diff --git a/packages/client/src/components/form/checkbox.vue b/packages/client/src/components/form/checkbox.vue
index a4d9716bbb..0f45288087 100644
--- a/packages/client/src/components/form/checkbox.vue
+++ b/packages/client/src/components/form/checkbox.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts" setup>
-import { toRefs, Ref } from "vue";
+import { toRefs, Ref, ref } from "vue";
 import * as os from "@/os";
 import Ripple from "@/components/MkRipple.vue";
 import { i18n } from "@/i18n";
@@ -38,16 +38,16 @@ const emit = defineEmits<{
 	(ev: "update:modelValue", v: boolean): void;
 }>();
 
-let button = $ref<HTMLElement>();
+let button = ref<HTMLElement>();
 const checked = toRefs(props).modelValue;
 const toggle = () => {
 	if (props.disabled) return;
 	emit("update:modelValue", !checked.value);
 
 	if (!checked.value) {
-		const rect = button.getBoundingClientRect();
-		const x = rect.left + button.offsetWidth / 2;
-		const y = rect.top + button.offsetHeight / 2;
+		const rect = button.value.getBoundingClientRect();
+		const x = rect.left + button.value.offsetWidth / 2;
+		const y = rect.top + button.value.offsetHeight / 2;
 		os.popup(Ripple, { x, y, particle: false }, {}, "end");
 	}
 };
diff --git a/packages/client/src/components/form/radio.vue b/packages/client/src/components/form/radio.vue
index 8534dd1222..2c6d59bb2d 100644
--- a/packages/client/src/components/form/radio.vue
+++ b/packages/client/src/components/form/radio.vue
@@ -14,6 +14,8 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from "vue";
+
 const props = defineProps<{
 	modelValue: any;
 	value: any;
@@ -24,7 +26,7 @@ const emit = defineEmits<{
 	(ev: "update:modelValue", value: any): void;
 }>();
 
-const checked = $computed(() => props.modelValue === props.value);
+const checked = computed(() => props.modelValue === props.value);
 
 function toggle(x) {
 	if (props.disabled) return;
diff --git a/packages/client/src/components/form/range.vue b/packages/client/src/components/form/range.vue
index 38ebe29e3e..fef7d08987 100644
--- a/packages/client/src/components/form/range.vue
+++ b/packages/client/src/components/form/range.vue
@@ -59,7 +59,7 @@ const props = withDefaults(
 );
 
 const inputEl = ref<HTMLElement>();
-const inputVal = $ref(props.modelValue);
+const inputVal = ref(props.modelValue);
 
 const emit = defineEmits<{
 	(ev: "update:modelValue", value: number): void;
@@ -74,7 +74,7 @@ const steps = computed(() => {
 });
 
 function onChange(x) {
-	emit("update:modelValue", inputVal);
+	emit("update:modelValue", inputVal.value);
 }
 
 const tooltipShowing = ref(false);
@@ -85,7 +85,7 @@ function tooltipShow() {
 		{
 			showing: tooltipShowing,
 			text: computed(() => {
-				return props.textConverter(inputVal);
+				return props.textConverter(inputVal.value);
 			}),
 			targetElement: inputEl,
 		},
diff --git a/packages/client/src/components/form/textarea.vue b/packages/client/src/components/form/textarea.vue
index a47ae41587..537b9df935 100644
--- a/packages/client/src/components/form/textarea.vue
+++ b/packages/client/src/components/form/textarea.vue
@@ -156,7 +156,7 @@ export default defineComponent({
 			v.value = newValue;
 		});
 
-		watch($$(v), () => {
+		watch(v, () => {
 			if (!props.manualSave) {
 				if (props.debounce) {
 					debouncedUpdated();
diff --git a/packages/client/src/components/global/MkA.vue b/packages/client/src/components/global/MkA.vue
index 83882e4edd..f346897580 100644
--- a/packages/client/src/components/global/MkA.vue
+++ b/packages/client/src/components/global/MkA.vue
@@ -10,6 +10,8 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from "vue";
+
 import * as os from "@/os";
 import copyToClipboard from "@/scripts/copy-to-clipboard";
 import { url } from "@/config";
@@ -31,7 +33,7 @@ const props = withDefaults(
 
 const router = useRouter();
 
-const active = $computed(() => {
+const active = computed(() => {
 	if (props.activeClass == null) return false;
 	const resolved = router.resolve(props.to);
 	if (resolved == null) return false;
diff --git a/packages/client/src/components/global/MkAvatar.vue b/packages/client/src/components/global/MkAvatar.vue
index a014280345..3c363c249c 100644
--- a/packages/client/src/components/global/MkAvatar.vue
+++ b/packages/client/src/components/global/MkAvatar.vue
@@ -36,7 +36,7 @@
 </template>
 
 <script lang="ts" setup>
-import { watch } from "vue";
+import { watch, computed, ref } from "vue";
 import type * as misskey from "firefish-js";
 import { getStaticImageUrl } from "@/scripts/get-static-image-url";
 import { extractAvgColorFromBlurhash } from "@/scripts/extract-avg-color-from-blurhash";
@@ -64,7 +64,7 @@ const emit = defineEmits<{
 	(ev: "click", v: MouseEvent): void;
 }>();
 
-const url = $computed(() =>
+const url = computed(() =>
 	defaultStore.state.disableShowingAnimatedImages
 		? getStaticImageUrl(props.user.avatarUrl)
 		: props.user.avatarUrl,
@@ -74,12 +74,12 @@ function onClick(ev: MouseEvent) {
 	emit("click", ev);
 }
 
-let color = $ref();
+let color = ref();
 
 watch(
 	() => props.user.avatarBlurhash,
 	() => {
-		color = extractAvgColorFromBlurhash(props.user.avatarBlurhash);
+		color.value = extractAvgColorFromBlurhash(props.user.avatarBlurhash);
 	},
 	{
 		immediate: true,
diff --git a/packages/client/src/components/global/MkPageHeader.vue b/packages/client/src/components/global/MkPageHeader.vue
index 48b675a036..cad993bf8a 100644
--- a/packages/client/src/components/global/MkPageHeader.vue
+++ b/packages/client/src/components/global/MkPageHeader.vue
@@ -121,7 +121,15 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
+import {
+	inject,
+	nextTick,
+	onMounted,
+	onUnmounted,
+	ref,
+	watch,
+	computed,
+} from "vue";
 import MkFollowButton from "@/components/MkFollowButton.vue";
 import { popupMenu } from "@/os";
 import { scrollToTop } from "@/scripts/scroll";
@@ -165,16 +173,16 @@ const metadata = injectPageMetadata();
 const hideTitle = inject("shouldOmitHeaderTitle", false);
 const thin_ = props.thin || inject("shouldHeaderThin", false);
 
-const el = $ref<HTMLElement | null>(null);
+const el = ref<HTMLElement | null>(null);
 const tabRefs = {};
-const tabHighlightEl = $ref<HTMLElement | null>(null);
-const tabsEl = $ref<HTMLElement | null>(null);
+const tabHighlightEl = ref<HTMLElement | null>(null);
+const tabsEl = ref<HTMLElement | null>(null);
 const bg = ref(null);
-let narrow = $ref(false);
-const hasTabs = $computed(() => props.tabs && props.tabs.length > 0);
-const hasActions = $computed(() => props.actions && props.actions.length > 0);
-const show = $computed(() => {
-	return !hideTitle || hasTabs || hasActions;
+let narrow = ref(false);
+const hasTabs = computed(() => props.tabs && props.tabs.length > 0);
+const hasActions = computed(() => props.actions && props.actions.length > 0);
+const show = computed(() => {
+	return !hideTitle || hasTabs.value || hasActions.value;
 });
 
 const openAccountMenu = (ev: MouseEvent) => {
@@ -187,8 +195,8 @@ const openAccountMenu = (ev: MouseEvent) => {
 };
 
 const showTabsPopup = (ev: MouseEvent) => {
-	if (!hasTabs) return;
-	if (!narrow) return;
+	if (!hasTabs.value) return;
+	if (!narrow.value) return;
 	ev.preventDefault();
 	ev.stopPropagation();
 	const menu = props.tabs.map((tab) => ({
@@ -210,7 +218,7 @@ const onClick = () => {
 	if (props.to) {
 		location.href = props.to;
 	} else {
-		scrollToTop(el, { behavior: "smooth" });
+		scrollToTop(el.value, { behavior: "smooth" });
 	}
 };
 
@@ -244,7 +252,7 @@ onMounted(() => {
 		() => {
 			nextTick(() => {
 				const tabEl = tabRefs[props.tab];
-				if (tabEl && tabHighlightEl) {
+				if (tabEl && tabHighlightEl.value) {
 					// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
 					// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
 					const tabSizeX = tabEl.scrollWidth + 20; // + the tab's padding
@@ -252,10 +260,10 @@ onMounted(() => {
 						tabEl.style = `--width: ${tabSizeX}px`;
 					}
 					setTimeout(() => {
-						tabHighlightEl.style.width = tabSizeX + "px";
-						tabHighlightEl.style.transform = `translateX(${tabEl.offsetLeft}px)`;
+						tabHighlightEl.value.style.width = tabSizeX + "px";
+						tabHighlightEl.value.style.transform = `translateX(${tabEl.offsetLeft}px)`;
 						window.requestAnimationFrame(() => {
-							tabsEl?.scrollTo({
+							tabsEl.value?.scrollTo({
 								left: tabEl.offsetLeft - 60,
 								behavior: "smooth",
 							});
@@ -269,14 +277,14 @@ onMounted(() => {
 		},
 	);
 
-	if (el && el.parentElement) {
-		narrow = el.parentElement.offsetWidth < 500;
+	if (el.value && el.value.parentElement) {
+		narrow.value = el.value.parentElement.offsetWidth < 500;
 		ro = new ResizeObserver((entries, observer) => {
-			if (el.parentElement && document.body.contains(el)) {
-				narrow = el.parentElement.offsetWidth < 500;
+			if (el.value.parentElement && document.body.contains(el.value)) {
+				narrow.value = el.value.parentElement.offsetWidth < 500;
 			}
 		});
-		ro.observe(el.parentElement);
+		ro.observe(el.value.parentElement);
 	}
 });
 
diff --git a/packages/client/src/components/global/MkSpacer.vue b/packages/client/src/components/global/MkSpacer.vue
index 0914104d51..347b763cd8 100644
--- a/packages/client/src/components/global/MkSpacer.vue
+++ b/packages/client/src/components/global/MkSpacer.vue
@@ -7,7 +7,7 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, onMounted, onUnmounted } from "vue";
+import { inject, onMounted, onUnmounted, ref } from "vue";
 import { deviceKind } from "@/scripts/device-kind";
 import { ui } from "@/config";
 
@@ -25,18 +25,18 @@ const props = withDefaults(
 );
 
 let ro: ResizeObserver,
-	root = $ref<HTMLElement>(),
-	content = $ref<HTMLElement>(),
-	margin = $ref(0);
+	root = ref<HTMLElement>(),
+	content = ref<HTMLElement>(),
+	margin = ref(0);
 const shouldSpacerMin = inject("shouldSpacerMin", false);
 
 const adjust = (rect: { width: number; height: number }) => {
 	if (shouldSpacerMin || deviceKind === "smartphone") {
-		margin = props.marginMin;
+		margin.value = props.marginMin;
 		return;
 	}
 	if (ui === "classic") {
-		margin = 12;
+		margin.value = 12;
 		return;
 	}
 
@@ -44,9 +44,9 @@ const adjust = (rect: { width: number; height: number }) => {
 		rect.width > (props.contentMax ?? 0) ||
 		(rect.width > 360 && window.innerWidth > 400)
 	) {
-		margin = props.marginMax;
+		margin.value = props.marginMax;
 	} else {
-		margin = props.marginMin;
+		margin.value = props.marginMin;
 	}
 };
 
@@ -59,14 +59,14 @@ onMounted(() => {
 		});
 		*/
 		adjust({
-			width: root!.offsetWidth,
-			height: root!.offsetHeight,
+			width: root.value!.offsetWidth,
+			height: root.value!.offsetHeight,
 		});
 	});
-	ro.observe(root!);
+	ro.observe(root.value!);
 
 	if (props.contentMax) {
-		content!.style.maxWidth = `${props.contentMax}px`;
+		content.value!.style.maxWidth = `${props.contentMax}px`;
 	}
 });
 
diff --git a/packages/client/src/components/global/MkStickyContainer.vue b/packages/client/src/components/global/MkStickyContainer.vue
index 5a23d03fb7..0bb8ebee9d 100644
--- a/packages/client/src/components/global/MkStickyContainer.vue
+++ b/packages/client/src/components/global/MkStickyContainer.vue
@@ -19,17 +19,17 @@ const CURRENT_STICKY_TOP = "CURRENT_STICKY_TOP";
 import type { Ref } from "vue";
 import { inject, onMounted, onUnmounted, provide, ref, watch } from "vue";
 
-const headerEl = $ref<HTMLElement>();
-const bodyEl = $ref<HTMLElement>();
+const headerEl = ref<HTMLElement>();
+const bodyEl = ref<HTMLElement>();
 
-let headerHeight = $ref<string | undefined>(),
-	childStickyTop = $ref(0);
+let headerHeight = ref<string | undefined>(),
+	childStickyTop = ref(0);
 const parentStickyTop = inject<Ref<number>>(CURRENT_STICKY_TOP, ref(0));
-provide(CURRENT_STICKY_TOP, $$(childStickyTop));
+provide(CURRENT_STICKY_TOP, childStickyTop);
 
 const calc = () => {
-	childStickyTop = parentStickyTop.value + headerEl.offsetHeight;
-	headerHeight = headerEl.offsetHeight.toString();
+	childStickyTop.value = parentStickyTop.value + headerEl.value.offsetHeight;
+	headerHeight.value = headerEl.value.offsetHeight.toString();
 };
 
 const observer = new ResizeObserver(() => {
@@ -44,16 +44,19 @@ onMounted(() => {
 	watch(parentStickyTop, calc);
 
 	watch(
-		$$(childStickyTop),
+		childStickyTop,
 		() => {
-			bodyEl.style.setProperty("--stickyTop", `${childStickyTop}px`);
+			bodyEl.value.style.setProperty(
+				"--stickyTop",
+				`${childStickyTop.value}px`,
+			);
 		},
 		{
 			immediate: true,
 		},
 	);
 
-	observer.observe(headerEl);
+	observer.observe(headerEl.value);
 });
 
 onUnmounted(() => {
diff --git a/packages/client/src/components/global/MkTime.vue b/packages/client/src/components/global/MkTime.vue
index 32066a1a9d..39d0217124 100644
--- a/packages/client/src/components/global/MkTime.vue
+++ b/packages/client/src/components/global/MkTime.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from "vue";
+import { onMounted, onUnmounted, ref, computed } from "vue";
 import { i18n } from "@/i18n";
 import { dateTimeFormat } from "@/scripts/intl-const";
 
@@ -37,12 +37,12 @@ const _time =
 const invalid = Number.isNaN(_time);
 const absolute = !invalid ? dateTimeFormat.format(_time) : i18n.ts._ago.invalid;
 
-let now = $ref((props.origin ?? new Date()).getTime());
-const relative = $computed<string>(() => {
+let now = ref((props.origin ?? new Date()).getTime());
+const relative = computed<string>(() => {
 	if (props.mode === "absolute") return ""; // absoluteではrelativeを使わないので計算しない
 	if (invalid) return i18n.ts._ago.invalid;
 
-	const ago = (now - _time) / 1000; /* ms */
+	const ago = (now.value - _time) / 1000; /* ms */
 	return ago >= 31536000
 		? i18n.t("_ago.yearsAgo", { n: Math.round(ago / 31536000).toString() })
 		: ago >= 2592000
@@ -66,11 +66,11 @@ let tickId: number;
 
 function tick() {
 	const _now = new Date().getTime();
-	const agoPrev = (now - _time) / 1000; /* ms */ // 現状のinterval
+	const agoPrev = (now.value - _time) / 1000; /* ms */ // 現状のinterval
 
-	now = _now;
+	now.value = _now;
 
-	const ago = (now - _time) / 1000; /* ms */ // 次のinterval
+	const ago = (now.value - _time) / 1000; /* ms */ // 次のinterval
 	const prev = agoPrev < 60 ? 10000 : agoPrev < 3600 ? 60000 : 180000;
 	const next = ago < 60 ? 10000 : ago < 3600 ? 60000 : 180000;
 
diff --git a/packages/client/src/components/global/RouterView.vue b/packages/client/src/components/global/RouterView.vue
index e82c794962..9f6f2dafc8 100644
--- a/packages/client/src/components/global/RouterView.vue
+++ b/packages/client/src/components/global/RouterView.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, onBeforeUnmount, provide } from "vue";
+import { inject, onBeforeUnmount, provide, shallowRef, ref } from "vue";
 import type { Resolved, Router } from "@/nirax";
 import { defaultStore } from "@/store";
 
@@ -48,18 +48,18 @@ function resolveNested(current: Resolved, d = 0): Resolved | null {
 }
 
 const current = resolveNested(router.current)!;
-let currentPageComponent = $shallowRef(current.route.component),
-	currentPageProps = $ref(current.props),
-	key = $ref(
+let currentPageComponent = shallowRef(current.route.component),
+	currentPageProps = ref(current.props),
+	key = ref(
 		current.route.path + JSON.stringify(Object.fromEntries(current.props)),
 	);
 
 function onChange({ resolved, key: newKey }) {
 	const current = resolveNested(resolved);
 	if (current == null) return;
-	currentPageComponent = current.route.component;
-	currentPageProps = current.props;
-	key =
+	currentPageComponent.value = current.route.component;
+	currentPageProps.value = current.props;
+	key.value =
 		current.route.path + JSON.stringify(Object.fromEntries(current.props));
 }
 
diff --git a/packages/client/src/components/page/page.textarea.vue b/packages/client/src/components/page/page.textarea.vue
index 323334438c..4bcd72eceb 100644
--- a/packages/client/src/components/page/page.textarea.vue
+++ b/packages/client/src/components/page/page.textarea.vue
@@ -3,7 +3,7 @@
 </template>
 
 <script lang="ts" setup>
-import { watch } from "vue";
+import { watch, ref } from "vue";
 import MkTextarea from "../form/textarea.vue";
 import { TextBlock } from "@/scripts/hpml/block";
 import { Hpml } from "@/scripts/hpml/evaluator";
@@ -13,12 +13,12 @@ const props = defineProps<{
 	hpml: Hpml;
 }>();
 
-let text = $ref("");
+let text = ref("");
 
 watch(
 	props.hpml.vars,
 	() => {
-		text = props.hpml.interpolate(props.block.text) as string;
+		text.value = props.hpml.interpolate(props.block.text) as string;
 	},
 	{
 		deep: true,
diff --git a/packages/client/src/pages/_error_.vue b/packages/client/src/pages/_error_.vue
index 3e3b44af45..7bc79fdf3c 100644
--- a/packages/client/src/pages/_error_.vue
+++ b/packages/client/src/pages/_error_.vue
@@ -35,6 +35,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, computed } from "vue";
+
 import {} from "vue";
 import * as misskey from "firefish-js";
 import MkButton from "@/components/MkButton.vue";
@@ -51,22 +53,22 @@ const props = withDefaults(
 	{},
 );
 
-let loaded = $ref(false);
-let serverIsDead = $ref(false);
-let meta = $ref<misskey.entities.LiteInstanceMetadata | null>(null);
+let loaded = ref(false);
+let serverIsDead = ref(false);
+let meta = ref<misskey.entities.LiteInstanceMetadata | null>(null);
 
 os.api("meta", {
 	detail: false,
 }).then(
 	(res) => {
-		loaded = true;
-		serverIsDead = false;
-		meta = res;
+		loaded.value = true;
+		serverIsDead.value = false;
+		meta.value = res;
 		localStorage.setItem("v", res.version);
 	},
 	() => {
-		loaded = true;
-		serverIsDead = true;
+		loaded.value = true;
+		serverIsDead.value = true;
 	},
 );
 
@@ -74,9 +76,9 @@ function reload() {
 	unisonReload();
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.error,
diff --git a/packages/client/src/pages/about-firefish.vue b/packages/client/src/pages/about-firefish.vue
index 651688d723..453d741876 100644
--- a/packages/client/src/pages/about-firefish.vue
+++ b/packages/client/src/pages/about-firefish.vue
@@ -203,7 +203,7 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onBeforeUnmount } from "vue";
+import { nextTick, onBeforeUnmount, ref, computed } from "vue";
 import { version } from "@/config";
 import FormLink from "@/components/form/link.vue";
 import FormSection from "@/components/form/section.vue";
@@ -225,15 +225,15 @@ sponsors = patronsResp.sponsors;
 patrons = patrons.filter((patron) => !sponsors.includes(patron));
 
 let easterEggReady = false;
-let easterEggEmojis = $ref([]);
-let easterEggEngine = $ref(null);
-const containerEl = $ref<HTMLElement>();
+let easterEggEmojis = ref([]);
+let easterEggEngine = ref(null);
+const containerEl = ref<HTMLElement>();
 
 function iconLoaded() {
 	const emojis = defaultStore.state.reactions;
-	const containerWidth = containerEl?.offsetWidth;
+	const containerWidth = containerEl.value?.offsetWidth;
 	for (let i = 0; i < 32; i++) {
-		easterEggEmojis.push({
+		easterEggEmojis.value.push({
 			id: i.toString(),
 			top: -(128 + Math.random() * 256),
 			left: Math.random() * containerWidth,
@@ -249,7 +249,7 @@ function iconLoaded() {
 function gravity() {
 	if (!easterEggReady) return;
 	easterEggReady = false;
-	easterEggEngine = physics(containerEl);
+	easterEggEngine.value = physics(containerEl.value);
 }
 
 function iLoveMisskey() {
@@ -260,14 +260,14 @@ function iLoveMisskey() {
 }
 
 onBeforeUnmount(() => {
-	if (easterEggEngine) {
-		easterEggEngine.stop();
+	if (easterEggEngine.value) {
+		easterEggEngine.value.stop();
 	}
 });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.aboutFirefish,
diff --git a/packages/client/src/pages/about.federation.vue b/packages/client/src/pages/about.federation.vue
index b22b7d2034..89073651a2 100644
--- a/packages/client/src/pages/about.federation.vue
+++ b/packages/client/src/pages/about.federation.vue
@@ -105,7 +105,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import MkInput from "@/components/form/input.vue";
 import MkSelect from "@/components/form/select.vue";
 import MkPagination from "@/components/MkPagination.vue";
@@ -113,29 +113,29 @@ import MkInstanceCardMini from "@/components/MkInstanceCardMini.vue";
 import FormSplit from "@/components/form/split.vue";
 import { i18n } from "@/i18n";
 
-let host = $ref("");
-let state = $ref("federating");
-let sort = $ref("+pubSub");
+let host = ref("");
+let state = ref("federating");
+let sort = ref("+pubSub");
 const pagination = {
 	endpoint: "federation/instances" as const,
 	limit: 10,
 	offsetMode: true,
 	params: computed(() => ({
-		sort: sort,
-		host: host !== "" ? host : null,
-		...(state === "federating"
+		sort: sort.value,
+		host: host.value !== "" ? host.value : null,
+		...(state.value === "federating"
 			? { federating: true }
-			: state === "subscribing"
+			: state.value === "subscribing"
 			? { subscribing: true }
-			: state === "publishing"
+			: state.value === "publishing"
 			? { publishing: true }
-			: state === "suspended"
+			: state.value === "suspended"
 			? { suspended: true }
-			: state === "blocked"
+			: state.value === "blocked"
 			? { blocked: true }
-			: state === "silenced"
+			: state.value === "silenced"
 			? { silenced: true }
-			: state === "notResponding"
+			: state.value === "notResponding"
 			? { notResponding: true }
 			: {}),
 	})),
diff --git a/packages/client/src/pages/about.vue b/packages/client/src/pages/about.vue
index 35c0cdc564..57d7b8b0e0 100644
--- a/packages/client/src/pages/about.vue
+++ b/packages/client/src/pages/about.vue
@@ -205,23 +205,23 @@ withDefaults(
 	},
 );
 
-let stats = $ref(null);
-let instanceIcon = $ref<HTMLImageElement>();
+let stats = ref(null);
+let instanceIcon = ref<HTMLImageElement>();
 let iconClicks = 0;
 let iconSrc = ref(instance.iconUrl || instance.faviconUrl || "/favicon.ico");
 let instanceIconAnimation = ref("");
 let tabs = ["overview", "emojis", "charts"];
-let tab = $ref(tabs[0]);
-watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
+let tab = ref(tabs[0]);
+watch(tab, () => syncSlide(tabs.indexOf(tab.value)));
 
 if (iAmModerator) tabs.push("federation");
 
 const initStats = () =>
 	os.api("stats", {}).then((res) => {
-		stats = res;
+		stats.value = res;
 	});
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
 let theTabs = [
 	{
@@ -249,7 +249,7 @@ if (iAmModerator) {
 	});
 }
 
-let headerTabs = $computed(() => theTabs);
+let headerTabs = computed(() => theTabs);
 
 definePageMetadata(
 	computed(() => ({
@@ -261,7 +261,7 @@ definePageMetadata(
 onMounted(() => {
 	if (defaultStore.state.woozyMode === true) {
 		iconSrc.value = "/static-assets/woozy.png";
-		instanceIcon.src = iconSrc.value;
+		instanceIcon.value.src = iconSrc.value;
 	}
 });
 
@@ -270,7 +270,7 @@ function easterEgg() {
 	if (iconClicks % 3 === 0) {
 		defaultStore.state.woozyMode = !defaultStore.state.woozyMode;
 		defaultStore.set("woozyMode", defaultStore.state.woozyMode);
-		if (instanceIcon) {
+		if (instanceIcon.value) {
 			instanceIconAnimation.value = "spin";
 			setTimeout(() => {
 				if (iconClicks % 6 === 0) {
@@ -281,7 +281,7 @@ function easterEgg() {
 				} else {
 					iconSrc.value = "/static-assets/woozy.png";
 				}
-				instanceIcon.src = iconSrc.value;
+				instanceIcon.value.src = iconSrc.value;
 			}, 500);
 		}
 	}
@@ -299,11 +299,11 @@ let swiperRef = null;
 
 function setSwiperRef(swiper) {
 	swiperRef = swiper;
-	syncSlide(tabs.indexOf(tab));
+	syncSlide(tabs.indexOf(tab.value));
 }
 
 function onSlideChange() {
-	tab = tabs[swiperRef.activeIndex];
+	tab.value = tabs[swiperRef.activeIndex];
 }
 
 function syncSlide(index) {
diff --git a/packages/client/src/pages/admin-file.vue b/packages/client/src/pages/admin-file.vue
index 87647dc1df..60481fd38f 100644
--- a/packages/client/src/pages/admin-file.vue
+++ b/packages/client/src/pages/admin-file.vue
@@ -156,7 +156,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from "vue";
+import { computed, watch, ref } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import MkButton from "@/components/MkButton.vue";
@@ -181,21 +181,23 @@ import "swiper/scss/virtual";
 let tabs = ["overview"];
 if (iAmModerator) tabs.push("ip");
 tabs.push("raw");
-let tab = $ref(tabs[0]);
-watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
+let tab = ref(tabs[0]);
+watch(tab, () => syncSlide(tabs.indexOf(tab.value)));
 
-let file: any = $ref(null);
-let info: any = $ref(null);
-let isSensitive: boolean = $ref(false);
+let file: any = ref(null);
+let info: any = ref(null);
+let isSensitive: boolean = ref(false);
 
 const props = defineProps<{
 	fileId: string;
 }>();
 
 async function fetch() {
-	file = await os.api("drive/files/show", { fileId: props.fileId });
-	info = await os.api("admin/drive/show-file", { fileId: props.fileId });
-	isSensitive = file.isSensitive;
+	file.value = await os.api("drive/files/show", { fileId: props.fileId });
+	info.value = await os.api("admin/drive/show-file", {
+		fileId: props.fileId,
+	});
+	isSensitive.value = file.value.isSensitive;
 }
 
 fetch();
@@ -203,12 +205,12 @@ fetch();
 async function del() {
 	const { canceled } = await os.confirm({
 		type: "warning",
-		text: i18n.t("removeAreYouSure", { x: file.name }),
+		text: i18n.t("removeAreYouSure", { x: file.value.name }),
 	});
 	if (canceled) return;
 
 	os.apiWithDialog("drive/files/delete", {
-		fileId: file.id,
+		fileId: file.value.id,
 	});
 }
 
@@ -217,20 +219,20 @@ async function toggleIsSensitive(v) {
 		fileId: props.fileId,
 		isSensitive: v,
 	});
-	isSensitive = v;
+	isSensitive.value = v;
 }
 
-const headerActions = $computed(() => [
+const headerActions = computed(() => [
 	{
 		text: i18n.ts.openInNewTab,
 		icon: "ph-arrow-square-out ph-bold ph-lg",
 		handler: () => {
-			window.open(file.url, "_blank");
+			window.open(file.value.url, "_blank");
 		},
 	},
 ]);
 
-const headerTabs = $computed(() => [
+const headerTabs = computed(() => [
 	{
 		key: "overview",
 		title: i18n.ts.overview,
@@ -252,7 +254,9 @@ const headerTabs = $computed(() => [
 
 definePageMetadata(
 	computed(() => ({
-		title: file ? i18n.ts.file + ": " + file.name : i18n.ts.file,
+		title: file.value
+			? i18n.ts.file + ": " + file.value.name
+			: i18n.ts.file,
 		icon: "ph-file ph-bold ph-lg",
 	})),
 );
@@ -261,11 +265,11 @@ let swiperRef = null;
 
 function setSwiperRef(swiper) {
 	swiperRef = swiper;
-	syncSlide(tabs.indexOf(tab));
+	syncSlide(tabs.indexOf(tab.value));
 }
 
 function onSlideChange() {
-	tab = tabs[swiperRef.activeIndex];
+	tab.value = tabs[swiperRef.activeIndex];
 }
 
 function syncSlide(index) {
diff --git a/packages/client/src/pages/admin/_header_.vue b/packages/client/src/pages/admin/_header_.vue
index ae0e48929d..360c81b611 100644
--- a/packages/client/src/pages/admin/_header_.vue
+++ b/packages/client/src/pages/admin/_header_.vue
@@ -102,7 +102,7 @@ const metadata = injectPageMetadata();
 
 const el = ref<HTMLElement>(null);
 const tabRefs = {};
-const tabHighlightEl = $ref<HTMLElement | null>(null);
+const tabHighlightEl = ref<HTMLElement | null>(null);
 const bg = ref(null);
 const height = ref(0);
 const hasTabs = computed(() => {
@@ -172,14 +172,14 @@ onMounted(() => {
 		() => {
 			nextTick(() => {
 				const tabEl = tabRefs[props.tab];
-				if (tabEl && tabHighlightEl) {
+				if (tabEl && tabHighlightEl.value) {
 					// offsetWidth や offsetLeft は少数を丸めてしまうため getBoundingClientRect を使う必要がある
 					// https://developer.mozilla.org/ja/docs/Web/API/HTMLElement/offsetWidth#%E5%80%A4
 					const parentRect =
 						tabEl.parentElement.getBoundingClientRect();
 					const rect = tabEl.getBoundingClientRect();
-					tabHighlightEl.style.width = rect.width + "px";
-					tabHighlightEl.style.left =
+					tabHighlightEl.value.style.width = rect.width + "px";
+					tabHighlightEl.value.style.left =
 						rect.left - parentRect.left + "px";
 				}
 			});
diff --git a/packages/client/src/pages/admin/abuses.vue b/packages/client/src/pages/admin/abuses.vue
index 27d8a700cb..a3e62a0556 100644
--- a/packages/client/src/pages/admin/abuses.vue
+++ b/packages/client/src/pages/admin/abuses.vue
@@ -91,7 +91,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 
 import MkInput from "@/components/form/input.vue";
 import MkSelect from "@/components/form/select.vue";
@@ -101,31 +101,31 @@ import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-let reports = $ref<InstanceType<typeof MkPagination>>();
+let reports = ref<InstanceType<typeof MkPagination>>();
 
-let state = $ref("unresolved");
-let reporterOrigin = $ref("combined");
-let targetUserOrigin = $ref("combined");
-let searchUsername = $ref("");
-let searchHost = $ref("");
+let state = ref("unresolved");
+let reporterOrigin = ref("combined");
+let targetUserOrigin = ref("combined");
+let searchUsername = ref("");
+let searchHost = ref("");
 
 const pagination = {
 	endpoint: "admin/abuse-user-reports" as const,
 	limit: 10,
 	params: computed(() => ({
-		state,
-		reporterOrigin,
-		targetUserOrigin,
+		state: state.value,
+		reporterOrigin: reporterOrigin.value,
+		targetUserOrigin: targetUserOrigin.value,
 	})),
 };
 
 function resolved(reportId) {
-	reports.removeItem((item) => item.id === reportId);
+	reports.value.removeItem((item) => item.id === reportId);
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.abuseReports,
diff --git a/packages/client/src/pages/admin/announcements.vue b/packages/client/src/pages/admin/announcements.vue
index b2172b307b..941b5b1913 100644
--- a/packages/client/src/pages/admin/announcements.vue
+++ b/packages/client/src/pages/admin/announcements.vue
@@ -65,6 +65,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, computed } from "vue";
+
 import {} from "vue";
 import MkButton from "@/components/MkButton.vue";
 import MkInput from "@/components/form/input.vue";
@@ -74,14 +76,14 @@ import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-let announcements: any[] = $ref([]);
+let announcements: any[] = ref([]);
 
 os.api("admin/announcements/list").then((announcementResponse) => {
-	announcements = announcementResponse;
+	announcements.value = announcementResponse;
 });
 
 function add() {
-	announcements.unshift({
+	announcements.value.unshift({
 		id: null,
 		title: "",
 		text: "",
@@ -97,7 +99,9 @@ function remove(announcement) {
 		text: i18n.t("removeAreYouSure", { x: announcement.title }),
 	}).then(({ canceled }) => {
 		if (canceled) return;
-		announcements = announcements.filter((x) => x !== announcement);
+		announcements.value = announcements.value.filter(
+			(x) => x !== announcement,
+		);
 		os.api("admin/announcements/delete", announcement);
 	});
 }
@@ -134,7 +138,7 @@ function save(announcement) {
 	}
 }
 
-const headerActions = $computed(() => [
+const headerActions = computed(() => [
 	{
 		asFullButton: true,
 		icon: "ph-plus ph-bold ph-lg",
@@ -143,7 +147,7 @@ const headerActions = $computed(() => [
 	},
 ]);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.announcements,
diff --git a/packages/client/src/pages/admin/bot-protection.vue b/packages/client/src/pages/admin/bot-protection.vue
index bdf9921900..79960e9d68 100644
--- a/packages/client/src/pages/admin/bot-protection.vue
+++ b/packages/client/src/pages/admin/bot-protection.vue
@@ -74,7 +74,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from "vue";
+import { defineAsyncComponent, ref } from "vue";
 import FormRadios from "@/components/form/radios.vue";
 import FormInput from "@/components/form/input.vue";
 import FormButton from "@/components/MkButton.vue";
@@ -88,20 +88,20 @@ const MkCaptcha = defineAsyncComponent(
 	() => import("@/components/MkCaptcha.vue"),
 );
 
-let provider = $ref(null);
-let hcaptchaSiteKey: string | null = $ref(null);
-let hcaptchaSecretKey: string | null = $ref(null);
-let recaptchaSiteKey: string | null = $ref(null);
-let recaptchaSecretKey: string | null = $ref(null);
+let provider = ref(null);
+let hcaptchaSiteKey: string | null = ref(null);
+let hcaptchaSecretKey: string | null = ref(null);
+let recaptchaSiteKey: string | null = ref(null);
+let recaptchaSecretKey: string | null = ref(null);
 
 async function init() {
 	const meta = await os.api("admin/meta");
-	hcaptchaSiteKey = meta.hcaptchaSiteKey;
-	hcaptchaSecretKey = meta.hcaptchaSecretKey;
-	recaptchaSiteKey = meta.recaptchaSiteKey;
-	recaptchaSecretKey = meta.recaptchaSecretKey;
+	hcaptchaSiteKey.value = meta.hcaptchaSiteKey;
+	hcaptchaSecretKey.value = meta.hcaptchaSecretKey;
+	recaptchaSiteKey.value = meta.recaptchaSiteKey;
+	recaptchaSecretKey.value = meta.recaptchaSecretKey;
 
-	provider = meta.enableHcaptcha
+	provider.value = meta.enableHcaptcha
 		? "hcaptcha"
 		: meta.enableRecaptcha
 		? "recaptcha"
@@ -110,12 +110,12 @@ async function init() {
 
 function save() {
 	os.apiWithDialog("admin/update-meta", {
-		enableHcaptcha: provider === "hcaptcha",
-		hcaptchaSiteKey,
-		hcaptchaSecretKey,
-		enableRecaptcha: provider === "recaptcha",
-		recaptchaSiteKey,
-		recaptchaSecretKey,
+		enableHcaptcha: provider.value === "hcaptcha",
+		hcaptchaSiteKey: hcaptchaSiteKey.value,
+		hcaptchaSecretKey: hcaptchaSecretKey.value,
+		enableRecaptcha: provider.value === "recaptcha",
+		recaptchaSiteKey: recaptchaSiteKey.value,
+		recaptchaSecretKey: recaptchaSecretKey.value,
 	}).then(() => {
 		fetchInstance();
 	});
diff --git a/packages/client/src/pages/admin/custom-css.vue b/packages/client/src/pages/admin/custom-css.vue
index 2362c1f93a..8dfe3530c1 100644
--- a/packages/client/src/pages/admin/custom-css.vue
+++ b/packages/client/src/pages/admin/custom-css.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import FormTextarea from "@/components/form/textarea.vue";
 import FormInfo from "@/components/MkInfo.vue";
 import * as os from "@/os";
@@ -45,9 +45,9 @@ watch(globalCustomCss, async () => {
 });
 */
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.customCss,
diff --git a/packages/client/src/pages/admin/database.vue b/packages/client/src/pages/admin/database.vue
index 7222ba3180..94ef4d17e7 100644
--- a/packages/client/src/pages/admin/database.vue
+++ b/packages/client/src/pages/admin/database.vue
@@ -34,6 +34,8 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from "vue";
+
 import {} from "vue";
 import FormSuspense from "@/components/form/suspense.vue";
 import FormButton from "@/components/MkButton.vue";
@@ -52,9 +54,9 @@ const databasePromiseFactory = () =>
 			Object.entries(res).sort((a, b) => b[1].size - a[1].size),
 		);
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.database,
diff --git a/packages/client/src/pages/admin/email-settings.vue b/packages/client/src/pages/admin/email-settings.vue
index 3eaee5566e..ffdc1a665e 100644
--- a/packages/client/src/pages/admin/email-settings.vue
+++ b/packages/client/src/pages/admin/email-settings.vue
@@ -91,6 +91,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, computed } from "vue";
+
 import {} from "vue";
 import FormSwitch from "@/components/form/switch.vue";
 import FormInput from "@/components/form/input.vue";
@@ -103,23 +105,23 @@ import { fetchInstance, instance } from "@/instance";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-let enableEmail: boolean = $ref(false);
-let email: any = $ref(null);
-let smtpSecure: boolean = $ref(false);
-let smtpHost: string = $ref("");
-let smtpPort: number = $ref(0);
-let smtpUser: string = $ref("");
-let smtpPass: string = $ref("");
+let enableEmail: boolean = ref(false);
+let email: any = ref(null);
+let smtpSecure: boolean = ref(false);
+let smtpHost: string = ref("");
+let smtpPort: number = ref(0);
+let smtpUser: string = ref("");
+let smtpPass: string = ref("");
 
 async function init() {
 	const meta = await os.api("admin/meta");
-	enableEmail = meta.enableEmail;
-	email = meta.email;
-	smtpSecure = meta.smtpSecure;
-	smtpHost = meta.smtpHost;
-	smtpPort = meta.smtpPort;
-	smtpUser = meta.smtpUser;
-	smtpPass = meta.smtpPass;
+	enableEmail.value = meta.enableEmail;
+	email.value = meta.email;
+	smtpSecure.value = meta.smtpSecure;
+	smtpHost.value = meta.smtpHost;
+	smtpPort.value = meta.smtpPort;
+	smtpUser.value = meta.smtpUser;
+	smtpPass.value = meta.smtpPass;
 }
 
 async function testEmail() {
@@ -138,19 +140,19 @@ async function testEmail() {
 
 function save() {
 	os.apiWithDialog("admin/update-meta", {
-		enableEmail,
-		email,
-		smtpSecure,
-		smtpHost,
-		smtpPort,
-		smtpUser,
-		smtpPass,
+		enableEmail: enableEmail.value,
+		email: email.value,
+		smtpSecure: smtpSecure.value,
+		smtpHost: smtpHost.value,
+		smtpPort: smtpPort.value,
+		smtpUser: smtpUser.value,
+		smtpPass: smtpPass.value,
 	}).then(() => {
 		fetchInstance();
 	});
 }
 
-const headerActions = $computed(() => [
+const headerActions = computed(() => [
 	{
 		asFullButton: true,
 		icon: "ph-test-tube ph-bold ph-lg",
@@ -165,7 +167,7 @@ const headerActions = $computed(() => [
 	},
 ]);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.emailServer,
diff --git a/packages/client/src/pages/admin/emoji-edit-dialog.vue b/packages/client/src/pages/admin/emoji-edit-dialog.vue
index 053f3d3e72..cff9f4065c 100644
--- a/packages/client/src/pages/admin/emoji-edit-dialog.vue
+++ b/packages/client/src/pages/admin/emoji-edit-dialog.vue
@@ -41,6 +41,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import {} from "vue";
 import XModalWindow from "@/components/MkModalWindow.vue";
 import MkButton from "@/components/MkButton.vue";
@@ -55,12 +57,12 @@ const props = defineProps<{
 	emoji: any;
 }>();
 
-let dialog = $ref(null);
-let name: string = $ref(props.emoji.name);
-let category: string = $ref(props.emoji.category);
-let aliases: string = $ref(props.emoji.aliases.join(" "));
-let categories: string[] = $ref(emojiCategories);
-let license: string = $ref(props.emoji.license ?? "");
+let dialog = ref(null);
+let name: string = ref(props.emoji.name);
+let category: string = ref(props.emoji.category);
+let aliases: string = ref(props.emoji.aliases.join(" "));
+let categories: string[] = ref(emojiCategories);
+let license: string = ref(props.emoji.license ?? "");
 
 const emit = defineEmits<{
 	(ev: "done", v: { deleted?: boolean; updated?: any }): void;
@@ -74,29 +76,29 @@ function ok() {
 async function update() {
 	await os.apiWithDialog("admin/emoji/update", {
 		id: props.emoji.id,
-		name,
-		category,
-		aliases: aliases.split(" "),
-		license: license === "" ? null : license,
+		name: name.value,
+		category: category.value,
+		aliases: aliases.value.split(" "),
+		license: license.value === "" ? null : license.value,
 	});
 
 	emit("done", {
 		updated: {
 			id: props.emoji.id,
-			name,
-			category,
-			aliases: aliases.split(" "),
-			license: license === "" ? null : license,
+			name: name.value,
+			category: category.value,
+			aliases: aliases.value.split(" "),
+			license: license.value === "" ? null : license.value,
 		},
 	});
 
-	dialog.close();
+	dialog.value.close();
 }
 
 async function del() {
 	const { canceled } = await os.confirm({
 		type: "warning",
-		text: i18n.t("removeAreYouSure", { x: name }),
+		text: i18n.t("removeAreYouSure", { x: name.value }),
 	});
 	if (canceled) return;
 
@@ -106,7 +108,7 @@ async function del() {
 		emit("done", {
 			deleted: true,
 		});
-		dialog.close();
+		dialog.value.close();
 	});
 }
 </script>
diff --git a/packages/client/src/pages/admin/emojis.vue b/packages/client/src/pages/admin/emojis.vue
index 94279c191b..cb5b740d99 100644
--- a/packages/client/src/pages/admin/emojis.vue
+++ b/packages/client/src/pages/admin/emojis.vue
@@ -422,7 +422,7 @@ const delBulk = async () => {
 	emojisPaginationComponent.value.reload();
 };
 
-const headerActions = $computed(() => [
+const headerActions = computed(() => [
 	{
 		asFullButton: true,
 		icon: "ph-plus ph-bold ph-lg",
@@ -435,7 +435,7 @@ const headerActions = $computed(() => [
 	},
 ]);
 
-const headerTabs = $computed(() => [
+const headerTabs = computed(() => [
 	{
 		key: "local",
 		icon: "ph-hand-fist ph-bold ph-lg",
diff --git a/packages/client/src/pages/admin/experiments.vue b/packages/client/src/pages/admin/experiments.vue
index 32ce9bfae8..9a0f39a28f 100644
--- a/packages/client/src/pages/admin/experiments.vue
+++ b/packages/client/src/pages/admin/experiments.vue
@@ -27,6 +27,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, computed } from "vue";
+
 import {} from "vue";
 import MkStickyContainer from "@/components/global/MkStickyContainer.vue";
 import FormSuspense from "@/components/form/suspense.vue";
@@ -36,8 +38,8 @@ import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-let enablePostImports = $ref(false);
-let meta = $ref<MetaExperiments | null>(null);
+let enablePostImports = ref(false);
+let meta = ref<MetaExperiments | null>(null);
 
 type MetaExperiments = {
 	experimentalFeatures?: {
@@ -46,16 +48,17 @@ type MetaExperiments = {
 };
 
 async function init() {
-	meta = (await os.api("admin/meta")) as MetaExperiments;
-	if (!meta) return;
+	meta.value = (await os.api("admin/meta")) as MetaExperiments;
+	if (!meta.value) return;
 
-	enablePostImports = meta.experimentalFeatures?.postImports ?? false;
+	enablePostImports.value =
+		meta.value.experimentalFeatures?.postImports ?? false;
 }
 
 function save() {
 	const experiments: MetaExperiments = {
 		experimentalFeatures: {
-			postImports: enablePostImports,
+			postImports: enablePostImports.value,
 		},
 	};
 	os.apiWithDialog("admin/update-meta", experiments).then(() => {
@@ -63,9 +66,9 @@ function save() {
 	});
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts._experiments.title,
diff --git a/packages/client/src/pages/admin/federation.vue b/packages/client/src/pages/admin/federation.vue
index 64329b87ad..bf8b549f57 100644
--- a/packages/client/src/pages/admin/federation.vue
+++ b/packages/client/src/pages/admin/federation.vue
@@ -20,9 +20,9 @@ import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
 import XFederation from "@/pages/about.federation.vue";
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata(
 	computed(() => ({
diff --git a/packages/client/src/pages/admin/files.vue b/packages/client/src/pages/admin/files.vue
index d37b257d45..2c160e761f 100644
--- a/packages/client/src/pages/admin/files.vue
+++ b/packages/client/src/pages/admin/files.vue
@@ -80,7 +80,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineAsyncComponent } from "vue";
+import { computed, defineAsyncComponent, ref } from "vue";
 import * as Acct from "firefish-js/built/acct";
 import MkButton from "@/components/MkButton.vue";
 import MkInput from "@/components/form/input.vue";
@@ -91,19 +91,22 @@ import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-let origin = $ref("local");
-let type = $ref(null);
-let searchHost = $ref("");
-let userId = $ref("");
-let viewMode = $ref("grid");
+let origin = ref("local");
+let type = ref(null);
+let searchHost = ref("");
+let userId = ref("");
+let viewMode = ref("grid");
 const pagination = {
 	endpoint: "admin/drive/files" as const,
 	limit: 10,
 	params: computed(() => ({
-		type: type && type !== "" ? type : null,
-		userId: userId && userId !== "" ? userId : null,
-		origin: origin,
-		hostname: searchHost && searchHost !== "" ? searchHost : null,
+		type: type.value && type.value !== "" ? type.value : null,
+		userId: userId.value && userId.value !== "" ? userId.value : null,
+		origin: origin.value,
+		hostname:
+			searchHost.value && searchHost.value !== ""
+				? searchHost.value
+				: null,
 	})),
 };
 
@@ -118,7 +121,7 @@ function clear() {
 	});
 }
 
-const headerActions = $computed(() => [
+const headerActions = computed(() => [
 	{
 		text: i18n.ts.lookup,
 		icon: "ph-magnifying-glass ph-bold ph-lg",
@@ -131,7 +134,7 @@ const headerActions = $computed(() => [
 	},
 ]);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata(
 	computed(() => ({
diff --git a/packages/client/src/pages/admin/hashtags.vue b/packages/client/src/pages/admin/hashtags.vue
index d10ee44f31..6ae71f5b1d 100644
--- a/packages/client/src/pages/admin/hashtags.vue
+++ b/packages/client/src/pages/admin/hashtags.vue
@@ -26,6 +26,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, computed } from "vue";
+
 import {} from "vue";
 import FormButton from "@/components/MkButton.vue";
 import FormTextarea from "@/components/form/textarea.vue";
@@ -35,24 +37,25 @@ import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-let hiddenTags: string = $ref("");
+let hiddenTags: string = ref("");
 
 async function init() {
 	const meta = await os.api("admin/meta");
-	hiddenTags = meta.hiddenTags.join("\n");
+	hiddenTags.value = meta.hiddenTags.join("\n");
 }
 
 function save() {
 	os.apiWithDialog("admin/update-meta", {
-		hiddenTags: hiddenTags.split("\n").map((h: string) => h.trim()) || [],
+		hiddenTags:
+			hiddenTags.value.split("\n").map((h: string) => h.trim()) || [],
 	}).then(() => {
 		fetchInstance();
 	});
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.hiddenTags,
diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index ac691a9665..e9e99349fa 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -59,17 +59,7 @@
 </template>
 
 <script lang="ts" setup>
-import {
-	defineAsyncComponent,
-	inject,
-	nextTick,
-	onMounted,
-	onUnmounted,
-	onActivated,
-	provide,
-	watch,
-	ref,
-} from "vue";
+import { defineAsyncComponent, inject, nextTick, onMounted, onUnmounted, onActivated, provide, watch, ref, , computed } from 'vue';
 import { i18n } from "@/i18n";
 import MkSuperMenu from "@/components/MkSuperMenu.vue";
 import MkInfo from "@/components/MkInfo.vue";
@@ -102,11 +92,11 @@ const indexInfo = {
 
 provide("shouldOmitHeaderTitle", false);
 
-let INFO = $ref(indexInfo);
-let childInfo = $ref(null);
-let narrow = $ref(false);
-let view = $ref(null);
-let pageProps = $ref({});
+let INFO = ref(indexInfo);
+let childInfo = ref(null);
+let narrow = ref(false);
+let view = ref(null);
+let pageProps = ref({});
 let noMaintainerInformation =
 	isEmpty(instance.maintainerName) || isEmpty(instance.maintainerEmail);
 let noBotProtection =
@@ -114,15 +104,15 @@ let noBotProtection =
 	!instance.enableHcaptcha &&
 	!instance.enableRecaptcha;
 let noEmailServer = !instance.enableEmail;
-let thereIsUnresolvedAbuseReport = $ref(false);
-let updateAvailable = $ref(false);
-let currentPage = $computed(() => router.currentRef.value.child);
+let thereIsUnresolvedAbuseReport = ref(false);
+let updateAvailable = ref(false);
+let currentPage = computed(() => router.currentRef.value.child);
 
 os.api("admin/abuse-user-reports", {
 	state: "unresolved",
 	limit: 1,
 }).then((reports) => {
-	if (reports?.length > 0) thereIsUnresolvedAbuseReport = true;
+	if (reports?.length > 0) thereIsUnresolvedAbuseReport.value = true;
 });
 
 if (defaultStore.state.showAdminUpdates) {
@@ -130,7 +120,7 @@ if (defaultStore.state.showAdminUpdates) {
 		const cleanRes = parseInt(res?.tag_name.replace(/[^0-9]/g, ""));
 		const cleanVersion = parseInt(version.replace(/[^0-9]/g, ""));
 		if (cleanRes > cleanVersion) {
-			updateAvailable = true;
+			updateAvailable.value = true;
 		}
 	});
 }
@@ -138,10 +128,10 @@ if (defaultStore.state.showAdminUpdates) {
 const NARROW_THRESHOLD = 600;
 const ro = new ResizeObserver((entries, observer) => {
 	if (entries.length === 0) return;
-	narrow = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
+	narrow.value = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
 });
 
-const menuDef = $computed(() => [
+const menuDef = computed(() => [
 	{
 		title: i18n.ts.quickAction,
 		items: [
@@ -180,55 +170,55 @@ const menuDef = $computed(() => [
 				icon: "ph-gauge ph-bold ph-lg",
 				text: i18n.ts.dashboard,
 				to: "/admin/overview",
-				active: currentPage?.route.name === "overview",
+				active: currentPage.value?.route.name === "overview",
 			},
 			{
 				icon: "ph-users ph-bold ph-lg",
 				text: i18n.ts.users,
 				to: "/admin/users",
-				active: currentPage?.route.name === "users",
+				active: currentPage.value?.route.name === "users",
 			},
 			{
 				icon: "ph-smiley ph-bold ph-lg",
 				text: i18n.ts.customEmojis,
 				to: "/admin/emojis",
-				active: currentPage?.route.name === "emojis",
+				active: currentPage.value?.route.name === "emojis",
 			},
 			{
 				icon: "ph-planet ph-bold ph-lg",
 				text: i18n.ts.federation,
 				to: "/admin/federation",
-				active: currentPage?.route.name === "federation",
+				active: currentPage.value?.route.name === "federation",
 			},
 			{
 				icon: "ph-queue ph-bold ph-lg",
 				text: i18n.ts.jobQueue,
 				to: "/admin/queue",
-				active: currentPage?.route.name === "queue",
+				active: currentPage.value?.route.name === "queue",
 			},
 			{
 				icon: "ph-cloud ph-bold ph-lg",
 				text: i18n.ts.files,
 				to: "/admin/files",
-				active: currentPage?.route.name === "files",
+				active: currentPage.value?.route.name === "files",
 			},
 			{
 				icon: "ph-megaphone-simple ph-bold ph-lg",
 				text: i18n.ts.announcements,
 				to: "/admin/announcements",
-				active: currentPage?.route.name === "announcements",
+				active: currentPage.value?.route.name === "announcements",
 			},
 			{
 				icon: "ph-money ph-bold ph-lg",
 				text: i18n.ts.ads,
 				to: "/admin/ads",
-				active: currentPage?.route.name === "ads",
+				active: currentPage.value?.route.name === "ads",
 			},
 			{
 				icon: "ph-warning-circle ph-bold ph-lg",
 				text: i18n.ts.abuseReports,
 				to: "/admin/abuses",
-				active: currentPage?.route.name === "abuses",
+				active: currentPage.value?.route.name === "abuses",
 			},
 		],
 	},
@@ -241,70 +231,70 @@ const menuDef = $computed(() => [
 							icon: "ph-gear-six ph-bold ph-lg",
 							text: i18n.ts.general,
 							to: "/admin/settings",
-							active: currentPage?.route.name === "settings",
+							active: currentPage.value?.route.name === "settings",
 						},
 						{
 							icon: "ph-envelope-simple-open ph-bold ph-lg",
 							text: i18n.ts.emailServer,
 							to: "/admin/email-settings",
 							active:
-								currentPage?.route.name === "email-settings",
+								currentPage.value?.route.name === "email-settings",
 						},
 						{
 							icon: "ph-cloud ph-bold ph-lg",
 							text: i18n.ts.objectStorage,
 							to: "/admin/object-storage",
 							active:
-								currentPage?.route.name === "object-storage",
+								currentPage.value?.route.name === "object-storage",
 						},
 						{
 							icon: "ph-lock ph-bold ph-lg",
 							text: i18n.ts.security,
 							to: "/admin/security",
-							active: currentPage?.route.name === "security",
+							active: currentPage.value?.route.name === "security",
 						},
 						{
 							icon: "ph-arrows-merge ph-bold ph-lg",
 							text: i18n.ts.relays,
 							to: "/admin/relays",
-							active: currentPage?.route.name === "relays",
+							active: currentPage.value?.route.name === "relays",
 						},
 						{
 							icon: "ph-plug ph-bold ph-lg",
 							text: i18n.ts.integration,
 							to: "/admin/integrations",
-							active: currentPage?.route.name === "integrations",
+							active: currentPage.value?.route.name === "integrations",
 						},
 						{
 							icon: "ph-prohibit ph-bold ph-lg",
 							text: i18n.ts.instanceBlocking,
 							to: "/admin/instance-block",
 							active:
-								currentPage?.route.name === "instance-block",
+								currentPage.value?.route.name === "instance-block",
 						},
 						{
 							icon: "ph-hash ph-bold ph-lg",
 							text: i18n.ts.hiddenTags,
 							to: "/admin/hashtags",
-							active: currentPage?.route.name === "hashtags",
+							active: currentPage.value?.route.name === "hashtags",
 						},
 						{
 							icon: "ph-ghost ph-bold ph-lg",
 							text: i18n.ts.proxyAccount,
 							to: "/admin/proxy-account",
-							active: currentPage?.route.name === "proxy-account",
+							active: currentPage.value?.route.name === "proxy-account",
 						},
 						{
 							icon: "ph-database ph-bold ph-lg",
 							text: i18n.ts.database,
 							to: "/admin/database",
-							active: currentPage?.route.name === "database",
+							active: currentPage.value?.route.name === "database",
 						},
 						{
 							icon: "ph-flask ph-bold ph-lg",
 							text: i18n.ts._experiments.title,
 							to: "/admin/experiments",
-							active: currentPage?.route.name === "experiments",
+							active: currentPage.value?.route.name === "experiments",
 						},
 					],
 				},
@@ -312,8 +302,8 @@ const menuDef = $computed(() => [
 		: []),
 ]);
 
-watch(narrow, () => {
-	if (currentPage?.route.name == null && !narrow) {
+watch(narrow.value, () => {
+	if (currentPage.value?.route.name == null && !narrow.value) {
 		router.push("/admin/overview");
 	}
 });
@@ -321,16 +311,16 @@ watch(narrow, () => {
 onMounted(() => {
 	ro.observe(el.value);
 
-	narrow = el.value.offsetWidth < NARROW_THRESHOLD;
-	if (currentPage?.route.name == null && !narrow) {
+	narrow.value = el.value.offsetWidth < NARROW_THRESHOLD;
+	if (currentPage.value?.route.name == null && !narrow.value) {
 		router.push("/admin/overview");
 	}
 });
 
 onActivated(() => {
-	narrow = el.value.offsetWidth < NARROW_THRESHOLD;
+	narrow.value = el.value.offsetWidth < NARROW_THRESHOLD;
 
-	if (!narrow && currentPage?.route.name == null) {
+	if (!narrow.value && currentPage.value?.route.name == null) {
 		router.replace("/admin/overview");
 	}
 });
@@ -340,16 +330,16 @@ onUnmounted(() => {
 });
 
 watch(router.currentRef, (to) => {
-	if (to.route.path === "/admin" && to.child?.route.name == null && !narrow) {
+	if (to.route.path === "/admin" && to.child?.route.name == null && !narrow.value) {
 		router.replace("/admin/overview");
 	}
 });
 
 provideMetadataReceiver((info) => {
 	if (info == null) {
-		childInfo = null;
+		childInfo.value = null;
 	} else {
-		childInfo = info;
+		childInfo.value = info;
 	}
 });
 
@@ -430,11 +420,11 @@ const lookup = (ev) => {
 	);
 };
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
-definePageMetadata(INFO);
+definePageMetadata(INFO.value);
 
 defineExpose({
 	header: {
diff --git a/packages/client/src/pages/admin/instance-block.vue b/packages/client/src/pages/admin/instance-block.vue
index f3c4f542c0..bad9ae6f7e 100644
--- a/packages/client/src/pages/admin/instance-block.vue
+++ b/packages/client/src/pages/admin/instance-block.vue
@@ -43,6 +43,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, computed } from "vue";
+
 import {} from "vue";
 import FormButton from "@/components/MkButton.vue";
 import FormTextarea from "@/components/form/textarea.vue";
@@ -53,30 +55,31 @@ import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-let blockedHosts: string = $ref("");
-let silencedHosts: string = $ref("");
-let tab = $ref("block");
+let blockedHosts: string = ref("");
+let silencedHosts: string = ref("");
+let tab = ref("block");
 
 async function init() {
 	const meta = await os.api("admin/meta");
 	if (meta) {
-		blockedHosts = meta.blockedHosts.join("\n");
-		silencedHosts = meta.silencedHosts.join("\n");
+		blockedHosts.value = meta.blockedHosts.join("\n");
+		silencedHosts.value = meta.silencedHosts.join("\n");
 	}
 }
 
 function save() {
 	os.apiWithDialog("admin/update-meta", {
-		blockedHosts: blockedHosts.split("\n").map((h) => h.trim()) || [],
-		silencedHosts: silencedHosts.split("\n").map((h) => h.trim()) || [],
+		blockedHosts: blockedHosts.value.split("\n").map((h) => h.trim()) || [],
+		silencedHosts:
+			silencedHosts.value.split("\n").map((h) => h.trim()) || [],
 	}).then(() => {
 		fetchInstance();
 	});
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.instanceBlocking,
diff --git a/packages/client/src/pages/admin/integrations.discord.vue b/packages/client/src/pages/admin/integrations.discord.vue
index 2bf047069d..ba81f316fa 100644
--- a/packages/client/src/pages/admin/integrations.discord.vue
+++ b/packages/client/src/pages/admin/integrations.discord.vue
@@ -34,6 +34,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import {} from "vue";
 import FormSwitch from "@/components/form/switch.vue";
 import FormInput from "@/components/form/input.vue";
@@ -44,24 +46,24 @@ import * as os from "@/os";
 import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
 
-let uri: string = $ref("");
-let enableDiscordIntegration: boolean = $ref(false);
-let discordClientId: string | null = $ref(null);
-let discordClientSecret: string | null = $ref(null);
+let uri: string = ref("");
+let enableDiscordIntegration: boolean = ref(false);
+let discordClientId: string | null = ref(null);
+let discordClientSecret: string | null = ref(null);
 
 async function init() {
 	const meta = await os.api("admin/meta");
-	uri = meta.uri;
-	enableDiscordIntegration = meta.enableDiscordIntegration;
-	discordClientId = meta.discordClientId;
-	discordClientSecret = meta.discordClientSecret;
+	uri.value = meta.uri;
+	enableDiscordIntegration.value = meta.enableDiscordIntegration;
+	discordClientId.value = meta.discordClientId;
+	discordClientSecret.value = meta.discordClientSecret;
 }
 
 function save() {
 	os.apiWithDialog("admin/update-meta", {
-		enableDiscordIntegration,
-		discordClientId,
-		discordClientSecret,
+		enableDiscordIntegration: enableDiscordIntegration.value,
+		discordClientId: discordClientId.value,
+		discordClientSecret: discordClientSecret.value,
 	}).then(() => {
 		fetchInstance();
 	});
diff --git a/packages/client/src/pages/admin/integrations.github.vue b/packages/client/src/pages/admin/integrations.github.vue
index 67c57a7dd1..a9bd2b8c4d 100644
--- a/packages/client/src/pages/admin/integrations.github.vue
+++ b/packages/client/src/pages/admin/integrations.github.vue
@@ -34,6 +34,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import {} from "vue";
 import FormSwitch from "@/components/form/switch.vue";
 import FormInput from "@/components/form/input.vue";
@@ -44,24 +46,24 @@ import * as os from "@/os";
 import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
 
-let uri: string = $ref("");
-let enableGithubIntegration: boolean = $ref(false);
-let githubClientId: string | null = $ref(null);
-let githubClientSecret: string | null = $ref(null);
+let uri: string = ref("");
+let enableGithubIntegration: boolean = ref(false);
+let githubClientId: string | null = ref(null);
+let githubClientSecret: string | null = ref(null);
 
 async function init() {
 	const meta = await os.api("admin/meta");
-	uri = meta.uri;
-	enableGithubIntegration = meta.enableGithubIntegration;
-	githubClientId = meta.githubClientId;
-	githubClientSecret = meta.githubClientSecret;
+	uri.value = meta.uri;
+	enableGithubIntegration.value = meta.enableGithubIntegration;
+	githubClientId.value = meta.githubClientId;
+	githubClientSecret.value = meta.githubClientSecret;
 }
 
 function save() {
 	os.apiWithDialog("admin/update-meta", {
-		enableGithubIntegration,
-		githubClientId,
-		githubClientSecret,
+		enableGithubIntegration: enableGithubIntegration.value,
+		githubClientId: githubClientId.value,
+		githubClientSecret: githubClientSecret.value,
 	}).then(() => {
 		fetchInstance();
 	});
diff --git a/packages/client/src/pages/admin/integrations.vue b/packages/client/src/pages/admin/integrations.vue
index 510b32a08d..516d439907 100644
--- a/packages/client/src/pages/admin/integrations.vue
+++ b/packages/client/src/pages/admin/integrations.vue
@@ -38,6 +38,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, computed } from "vue";
+
 import {} from "vue";
 import XGithub from "./integrations.github.vue";
 import XDiscord from "./integrations.discord.vue";
@@ -47,20 +49,20 @@ import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-let enableTwitterIntegration: boolean = $ref(false);
-let enableGithubIntegration: boolean = $ref(false);
-let enableDiscordIntegration: boolean = $ref(false);
+let enableTwitterIntegration: boolean = ref(false);
+let enableGithubIntegration: boolean = ref(false);
+let enableDiscordIntegration: boolean = ref(false);
 
 async function init() {
 	const meta = await os.api("admin/meta");
-	enableTwitterIntegration = meta.enableTwitterIntegration;
-	enableGithubIntegration = meta.enableGithubIntegration;
-	enableDiscordIntegration = meta.enableDiscordIntegration;
+	enableTwitterIntegration.value = meta.enableTwitterIntegration;
+	enableGithubIntegration.value = meta.enableGithubIntegration;
+	enableDiscordIntegration.value = meta.enableDiscordIntegration;
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.integration,
diff --git a/packages/client/src/pages/admin/object-storage.vue b/packages/client/src/pages/admin/object-storage.vue
index c90a970c79..98eb103ba0 100644
--- a/packages/client/src/pages/admin/object-storage.vue
+++ b/packages/client/src/pages/admin/object-storage.vue
@@ -149,6 +149,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, computed } from "vue";
+
 import {} from "vue";
 import FormSwitch from "@/components/form/switch.vue";
 import FormInput from "@/components/form/input.vue";
@@ -159,58 +161,58 @@ import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-let useObjectStorage: boolean = $ref(false);
-let objectStorageBaseUrl: string | null = $ref(null);
-let objectStorageBucket: string | null = $ref(null);
-let objectStoragePrefix: string | null = $ref(null);
-let objectStorageEndpoint: string | null = $ref(null);
-let objectStorageRegion: string | null = $ref(null);
-let objectStoragePort: number | null = $ref(null);
-let objectStorageAccessKey: string | null = $ref(null);
-let objectStorageSecretKey: string | null = $ref(null);
-let objectStorageUseSSL: boolean = $ref(false);
-let objectStorageUseProxy: boolean = $ref(false);
-let objectStorageSetPublicRead: boolean = $ref(false);
-let objectStorageS3ForcePathStyle: boolean = $ref(true);
+let useObjectStorage: boolean = ref(false);
+let objectStorageBaseUrl: string | null = ref(null);
+let objectStorageBucket: string | null = ref(null);
+let objectStoragePrefix: string | null = ref(null);
+let objectStorageEndpoint: string | null = ref(null);
+let objectStorageRegion: string | null = ref(null);
+let objectStoragePort: number | null = ref(null);
+let objectStorageAccessKey: string | null = ref(null);
+let objectStorageSecretKey: string | null = ref(null);
+let objectStorageUseSSL: boolean = ref(false);
+let objectStorageUseProxy: boolean = ref(false);
+let objectStorageSetPublicRead: boolean = ref(false);
+let objectStorageS3ForcePathStyle: boolean = ref(true);
 
 async function init() {
 	const meta = await os.api("admin/meta");
-	useObjectStorage = meta.useObjectStorage;
-	objectStorageBaseUrl = meta.objectStorageBaseUrl;
-	objectStorageBucket = meta.objectStorageBucket;
-	objectStoragePrefix = meta.objectStoragePrefix;
-	objectStorageEndpoint = meta.objectStorageEndpoint;
-	objectStorageRegion = meta.objectStorageRegion;
-	objectStoragePort = meta.objectStoragePort;
-	objectStorageAccessKey = meta.objectStorageAccessKey;
-	objectStorageSecretKey = meta.objectStorageSecretKey;
-	objectStorageUseSSL = meta.objectStorageUseSSL;
-	objectStorageUseProxy = meta.objectStorageUseProxy;
-	objectStorageSetPublicRead = meta.objectStorageSetPublicRead;
-	objectStorageS3ForcePathStyle = meta.objectStorageS3ForcePathStyle;
+	useObjectStorage.value = meta.useObjectStorage;
+	objectStorageBaseUrl.value = meta.objectStorageBaseUrl;
+	objectStorageBucket.value = meta.objectStorageBucket;
+	objectStoragePrefix.value = meta.objectStoragePrefix;
+	objectStorageEndpoint.value = meta.objectStorageEndpoint;
+	objectStorageRegion.value = meta.objectStorageRegion;
+	objectStoragePort.value = meta.objectStoragePort;
+	objectStorageAccessKey.value = meta.objectStorageAccessKey;
+	objectStorageSecretKey.value = meta.objectStorageSecretKey;
+	objectStorageUseSSL.value = meta.objectStorageUseSSL;
+	objectStorageUseProxy.value = meta.objectStorageUseProxy;
+	objectStorageSetPublicRead.value = meta.objectStorageSetPublicRead;
+	objectStorageS3ForcePathStyle.value = meta.objectStorageS3ForcePathStyle;
 }
 
 function save() {
 	os.apiWithDialog("admin/update-meta", {
-		useObjectStorage,
-		objectStorageBaseUrl,
-		objectStorageBucket,
-		objectStoragePrefix,
-		objectStorageEndpoint,
-		objectStorageRegion,
-		objectStoragePort,
-		objectStorageAccessKey,
-		objectStorageSecretKey,
-		objectStorageUseSSL,
-		objectStorageUseProxy,
-		objectStorageSetPublicRead,
-		objectStorageS3ForcePathStyle,
+		useObjectStorage: useObjectStorage.value,
+		objectStorageBaseUrl: objectStorageBaseUrl.value,
+		objectStorageBucket: objectStorageBucket.value,
+		objectStoragePrefix: objectStoragePrefix.value,
+		objectStorageEndpoint: objectStorageEndpoint.value,
+		objectStorageRegion: objectStorageRegion.value,
+		objectStoragePort: objectStoragePort.value,
+		objectStorageAccessKey: objectStorageAccessKey.value,
+		objectStorageSecretKey: objectStorageSecretKey.value,
+		objectStorageUseSSL: objectStorageUseSSL.value,
+		objectStorageUseProxy: objectStorageUseProxy.value,
+		objectStorageSetPublicRead: objectStorageSetPublicRead.value,
+		objectStorageS3ForcePathStyle: objectStorageS3ForcePathStyle.value,
 	}).then(() => {
 		fetchInstance();
 	});
 }
 
-const headerActions = $computed(() => [
+const headerActions = computed(() => [
 	{
 		asFullButton: true,
 		icon: "ph-check ph-bold ph-lg",
@@ -219,7 +221,7 @@ const headerActions = $computed(() => [
 	},
 ]);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.objectStorage,
diff --git a/packages/client/src/pages/admin/other-settings.vue b/packages/client/src/pages/admin/other-settings.vue
index 1d74e752a0..55ec9021b4 100644
--- a/packages/client/src/pages/admin/other-settings.vue
+++ b/packages/client/src/pages/admin/other-settings.vue
@@ -13,6 +13,8 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from "vue";
+
 import {} from "vue";
 import FormSuspense from "@/components/form/suspense.vue";
 import * as os from "@/os";
@@ -30,7 +32,7 @@ function save() {
 	});
 }
 
-const headerActions = $computed(() => [
+const headerActions = computed(() => [
 	{
 		asFullButton: true,
 		icon: "ph-check ph-bold ph-lg",
@@ -39,7 +41,7 @@ const headerActions = $computed(() => [
 	},
 ]);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.other,
diff --git a/packages/client/src/pages/admin/overview.active-users.vue b/packages/client/src/pages/admin/overview.active-users.vue
index 25dcac494d..705e1d164c 100644
--- a/packages/client/src/pages/admin/overview.active-users.vue
+++ b/packages/client/src/pages/admin/overview.active-users.vue
@@ -8,13 +8,7 @@
 </template>
 
 <script lang="ts" setup>
-import {
-	markRaw,
-	version as vueVersion,
-	onMounted,
-	onBeforeUnmount,
-	nextTick,
-} from "vue";
+import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, , shallowRef, ref } from 'vue';
 import { Chart } from "chart.js";
 import tinycolor from "tinycolor2";
 import gradient from "chartjs-plugin-gradient";
@@ -27,11 +21,11 @@ import { initChart } from "@/scripts/init-chart";
 
 initChart();
 
-const chartEl = $shallowRef<HTMLCanvasElement>(null);
+const chartEl = shallowRef<HTMLCanvasElement>(null);
 const now = new Date();
 let chartInstance: Chart = null;
 const chartLimit = 7;
-let fetching = $ref(true);
+let fetching = ref(true);
 
 const { handler: externalTooltipHandler } = useChartTooltip();
 
@@ -69,7 +63,7 @@ async function renderChart() {
 
 	const max = Math.max(...raw.read);
 
-	chartInstance = new Chart(chartEl, {
+	chartInstance = new Chart(chartEl.value, {
 		type: "bar",
 		data: {
 			datasets: [
@@ -166,7 +160,7 @@ async function renderChart() {
 		plugins: [chartVLine(vLineColor)],
 	});
 
-	fetching = false;
+	fetching.value = false;
 }
 
 onMounted(async () => {
diff --git a/packages/client/src/pages/admin/overview.ap-requests.vue b/packages/client/src/pages/admin/overview.ap-requests.vue
index c655336e83..550684a886 100644
--- a/packages/client/src/pages/admin/overview.ap-requests.vue
+++ b/packages/client/src/pages/admin/overview.ap-requests.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted, ref } from "vue";
+import { onMounted, onUnmounted, ref, shallowRef } from "vue";
 import { Chart } from "chart.js";
 import gradient from "chartjs-plugin-gradient";
 import tinycolor from "tinycolor2";
@@ -33,9 +33,9 @@ import { initChart } from "@/scripts/init-chart";
 initChart();
 
 const chartLimit = 50;
-const chartEl = $shallowRef<HTMLCanvasElement>();
-const chartEl2 = $shallowRef<HTMLCanvasElement>();
-let fetching = $ref(true);
+const chartEl = shallowRef<HTMLCanvasElement>();
+const chartEl2 = shallowRef<HTMLCanvasElement>();
+let fetching = ref(true);
 
 const { handler: externalTooltipHandler } = useChartTooltip();
 const { handler: externalTooltipHandler2 } = useChartTooltip();
@@ -79,7 +79,7 @@ onMounted(async () => {
 	const succMax = Math.max(...raw.deliverSucceeded);
 	const failMax = Math.max(...raw.deliverFailed);
 
-	new Chart(chartEl, {
+	new Chart(chartEl.value, {
 		type: "line",
 		data: {
 			datasets: [
@@ -187,7 +187,7 @@ onMounted(async () => {
 		plugins: [chartVLine(vLineColor)],
 	});
 
-	new Chart(chartEl2, {
+	new Chart(chartEl2.value, {
 		type: "bar",
 		data: {
 			datasets: [
@@ -276,7 +276,7 @@ onMounted(async () => {
 		plugins: [chartVLine(vLineColor)],
 	});
 
-	fetching = false;
+	fetching.value = false;
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/overview.federation.vue b/packages/client/src/pages/admin/overview.federation.vue
index ab4dd2c69b..28da787e6c 100644
--- a/packages/client/src/pages/admin/overview.federation.vue
+++ b/packages/client/src/pages/admin/overview.federation.vue
@@ -65,13 +65,13 @@ import MkNumberDiff from "@/components/MkNumberDiff.vue";
 import { i18n } from "@/i18n";
 import { useChartTooltip } from "@/scripts/use-chart-tooltip";
 
-let topSubInstancesForPie: any = $ref(null);
-let topPubInstancesForPie: any = $ref(null);
-let federationPubActive = $ref<number | null>(null);
-let federationPubActiveDiff = $ref<number | null>(null);
-let federationSubActive = $ref<number | null>(null);
-let federationSubActiveDiff = $ref<number | null>(null);
-let fetching = $ref(true);
+let topSubInstancesForPie: any = ref(null);
+let topPubInstancesForPie: any = ref(null);
+let federationPubActive = ref<number | null>(null);
+let federationPubActiveDiff = ref<number | null>(null);
+let federationSubActive = ref<number | null>(null);
+let federationSubActiveDiff = ref<number | null>(null);
+let fetching = ref(true);
 
 const { handler: externalTooltipHandler } = useChartTooltip();
 
@@ -80,13 +80,13 @@ onMounted(async () => {
 		limit: 2,
 		span: "day",
 	});
-	federationPubActive = chart.pubActive[0];
-	federationPubActiveDiff = chart.pubActive[0] - chart.pubActive[1];
-	federationSubActive = chart.subActive[0];
-	federationSubActiveDiff = chart.subActive[0] - chart.subActive[1];
+	federationPubActive.value = chart.pubActive[0];
+	federationPubActiveDiff.value = chart.pubActive[0] - chart.pubActive[1];
+	federationSubActive.value = chart.subActive[0];
+	federationSubActiveDiff.value = chart.subActive[0] - chart.subActive[1];
 
 	os.apiGet("federation/stats", { limit: 10 }).then((res) => {
-		topSubInstancesForPie = res.topSubInstances
+		topSubInstancesForPie.value = res.topSubInstances
 			.map((x) => ({
 				name: x.host,
 				color: x.themeColor,
@@ -102,7 +102,7 @@ onMounted(async () => {
 					value: res.otherFollowersCount,
 				},
 			]);
-		topPubInstancesForPie = res.topPubInstances
+		topPubInstancesForPie.value = res.topPubInstances
 			.map((x) => ({
 				name: x.host,
 				color: x.themeColor,
@@ -120,7 +120,7 @@ onMounted(async () => {
 			]);
 	});
 
-	fetching = false;
+	fetching.value = false;
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/overview.heatmap.vue b/packages/client/src/pages/admin/overview.heatmap.vue
index e926fdc53b..e70cc739d1 100644
--- a/packages/client/src/pages/admin/overview.heatmap.vue
+++ b/packages/client/src/pages/admin/overview.heatmap.vue
@@ -18,10 +18,12 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import MkHeatmap from "@/components/MkHeatmap.vue";
 import MkSelect from "@/components/form/select.vue";
 
-let src = $ref("notes");
+let src = ref("notes");
 </script>
 
 <style lang="scss" module>
diff --git a/packages/client/src/pages/admin/overview.metrics.vue b/packages/client/src/pages/admin/overview.metrics.vue
index 48d407e7d3..b995c65a98 100644
--- a/packages/client/src/pages/admin/overview.metrics.vue
+++ b/packages/client/src/pages/admin/overview.metrics.vue
@@ -54,7 +54,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, onUnmounted } from "vue";
+import { onMounted, onUnmounted, ref, computed } from "vue";
 import XPie from "../../widgets/server-metric/pie.vue";
 import bytes from "@/filters/bytes";
 import { stream } from "@/stream";
@@ -64,35 +64,35 @@ import { i18n } from "@/i18n";
 const meta = await os.api("server-info", {});
 const serverStats = await os.api("stats");
 
-let cpuUsage: number = $ref(0);
+let cpuUsage: number = ref(0);
 
-let memUsage: number = $ref(0);
-let memTotal: number = $ref(0);
-let memUsed: number = $ref(0);
-let memFree: number = $ref(0);
+let memUsage: number = ref(0);
+let memTotal: number = ref(0);
+let memUsed: number = ref(0);
+let memFree: number = ref(0);
 
-let meiliProgress: number = $ref(0);
-let meiliTotalSize: number = $ref(0);
-let meiliIndexCount: number = $ref(0);
-let meiliAvailable: string = $ref("unavailable");
+let meiliProgress: number = ref(0);
+let meiliTotalSize: number = ref(0);
+let meiliIndexCount: number = ref(0);
+let meiliAvailable: string = ref("unavailable");
 
-const diskUsage = $computed(() => meta.fs.used / meta.fs.total);
-const diskTotal = $computed(() => meta.fs.total);
-const diskUsed = $computed(() => meta.fs.used);
-const diskAvailable = $computed(() => meta.fs.total - meta.fs.used);
+const diskUsage = computed(() => meta.fs.used / meta.fs.total);
+const diskTotal = computed(() => meta.fs.total);
+const diskUsed = computed(() => meta.fs.used);
+const diskAvailable = computed(() => meta.fs.total - meta.fs.used);
 
 function onStats(stats) {
-	cpuUsage = stats.cpu;
+	cpuUsage.value = stats.cpu;
 
-	memUsage = stats.mem.active / stats.mem.total;
-	memTotal = stats.mem.total;
-	memUsed = stats.mem.active;
-	memFree = memTotal - memUsed;
+	memUsage.value = stats.mem.active / stats.mem.total;
+	memTotal.value = stats.mem.total;
+	memUsed.value = stats.mem.active;
+	memFree.value = memTotal.value - memUsed.value;
 
-	meiliTotalSize = stats.meilisearch.size;
-	meiliIndexCount = stats.meilisearch.indexed_count;
-	meiliAvailable = stats.meilisearch.health;
-	meiliProgress = meiliIndexCount / serverStats.notesCount;
+	meiliTotalSize.value = stats.meilisearch.size;
+	meiliIndexCount.value = stats.meilisearch.indexed_count;
+	meiliAvailable.value = stats.meilisearch.health;
+	meiliProgress.value = meiliIndexCount.value / serverStats.notesCount;
 }
 
 const connection = stream.useChannel("serverStats");
diff --git a/packages/client/src/pages/admin/overview.moderators.vue b/packages/client/src/pages/admin/overview.moderators.vue
index a29cc20b9f..b1ebed6a57 100644
--- a/packages/client/src/pages/admin/overview.moderators.vue
+++ b/packages/client/src/pages/admin/overview.moderators.vue
@@ -30,17 +30,17 @@ import * as os from "@/os";
 import number from "@/filters/number";
 import { i18n } from "@/i18n";
 
-let moderators: any = $ref(null);
-let fetching = $ref(true);
+let moderators: any = ref(null);
+let fetching = ref(true);
 
 onMounted(async () => {
-	moderators = await os.api("admin/show-users", {
+	moderators.value = await os.api("admin/show-users", {
 		sort: "+updatedAt",
 		state: "adminOrModerator",
 		limit: 30,
 	});
 
-	fetching = false;
+	fetching.value = false;
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/overview.queue.vue b/packages/client/src/pages/admin/overview.queue.vue
index 5b003887eb..1084f2e397 100644
--- a/packages/client/src/pages/admin/overview.queue.vue
+++ b/packages/client/src/pages/admin/overview.queue.vue
@@ -42,7 +42,7 @@
 </template>
 
 <script lang="ts" setup>
-import { markRaw, onMounted, onUnmounted, ref } from "vue";
+import { markRaw, onMounted, onUnmounted, ref, shallowRef } from "vue";
 import XChart from "./overview.queue.chart.vue";
 import number from "@/filters/number";
 import * as os from "@/os";
@@ -55,10 +55,10 @@ const activeSincePrevTick = ref(0);
 const active = ref(0);
 const delayed = ref(0);
 const waiting = ref(0);
-let chartProcess = $shallowRef<InstanceType<typeof XChart>>();
-let chartActive = $shallowRef<InstanceType<typeof XChart>>();
-let chartDelayed = $shallowRef<InstanceType<typeof XChart>>();
-let chartWaiting = $shallowRef<InstanceType<typeof XChart>>();
+let chartProcess = shallowRef<InstanceType<typeof XChart>>();
+let chartActive = shallowRef<InstanceType<typeof XChart>>();
+let chartDelayed = shallowRef<InstanceType<typeof XChart>>();
+let chartWaiting = shallowRef<InstanceType<typeof XChart>>();
 
 const props = defineProps<{
 	domain: string;
@@ -70,10 +70,10 @@ const onStats = (stats) => {
 	delayed.value = stats[props.domain].delayed;
 	waiting.value = stats[props.domain].waiting;
 
-	chartProcess.pushData(stats[props.domain].activeSincePrevTick);
-	chartActive.pushData(stats[props.domain].active);
-	chartDelayed.pushData(stats[props.domain].delayed);
-	chartWaiting.pushData(stats[props.domain].waiting);
+	chartProcess.value.pushData(stats[props.domain].activeSincePrevTick);
+	chartActive.value.pushData(stats[props.domain].active);
+	chartDelayed.value.pushData(stats[props.domain].delayed);
+	chartWaiting.value.pushData(stats[props.domain].waiting);
 };
 
 const onStatsLog = (statsLog) => {
@@ -89,10 +89,10 @@ const onStatsLog = (statsLog) => {
 		dataWaiting.push(stats[props.domain].waiting);
 	}
 
-	chartProcess.setData(dataProcess);
-	chartActive.setData(dataActive);
-	chartDelayed.setData(dataDelayed);
-	chartWaiting.setData(dataWaiting);
+	chartProcess.value.setData(dataProcess);
+	chartActive.value.setData(dataActive);
+	chartDelayed.value.setData(dataDelayed);
+	chartWaiting.value.setData(dataWaiting);
 };
 
 onMounted(() => {
diff --git a/packages/client/src/pages/admin/overview.stats.vue b/packages/client/src/pages/admin/overview.stats.vue
index 172e346e70..de301b0b9b 100644
--- a/packages/client/src/pages/admin/overview.stats.vue
+++ b/packages/client/src/pages/admin/overview.stats.vue
@@ -102,36 +102,36 @@ import MkNumberDiff from "@/components/MkNumberDiff.vue";
 import MkNumber from "@/components/MkNumber.vue";
 import { i18n } from "@/i18n";
 
-let stats: any = $ref(null);
-let usersComparedToThePrevDay = $ref<number>();
-let notesComparedToThePrevDay = $ref<number>();
-let onlineUsersCount = $ref(0);
-let emojiCount = $ref(0);
-let fetching = $ref(true);
+let stats: any = ref(null);
+let usersComparedToThePrevDay = ref<number>();
+let notesComparedToThePrevDay = ref<number>();
+let onlineUsersCount = ref(0);
+let emojiCount = ref(0);
+let fetching = ref(true);
 
 onMounted(async () => {
 	const [_stats, _onlineUsersCount] = await Promise.all([
 		os.api("stats", {}),
 		os.api("get-online-users-count").then((res) => res.count),
 	]);
-	stats = _stats;
-	onlineUsersCount = _onlineUsersCount;
+	stats.value = _stats;
+	onlineUsersCount.value = _onlineUsersCount;
 
 	os.apiGet("charts/users", { limit: 2, span: "day" }).then((chart) => {
-		usersComparedToThePrevDay =
-			stats.originalUsersCount - chart.local.total[1];
+		usersComparedToThePrevDay.value =
+			stats.value.originalUsersCount - chart.local.total[1];
 	});
 
 	os.apiGet("charts/notes", { limit: 2, span: "day" }).then((chart) => {
-		notesComparedToThePrevDay =
-			stats.originalNotesCount - chart.local.total[1];
+		notesComparedToThePrevDay.value =
+			stats.value.originalNotesCount - chart.local.total[1];
 	});
 
 	os.api("meta", { detail: false }).then((meta) => {
-		emojiCount = meta.emojis.length;
+		emojiCount.value = meta.emojis.length;
 	});
 
-	fetching = false;
+	fetching.value = false;
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/overview.user.vue b/packages/client/src/pages/admin/overview.user.vue
index 5e878aaadd..860044ea81 100644
--- a/packages/client/src/pages/admin/overview.user.vue
+++ b/packages/client/src/pages/admin/overview.user.vue
@@ -17,6 +17,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import * as misskey from "firefish-js";
 import MkMiniChart from "@/components/MkMiniChart.vue";
 import * as os from "@/os";
@@ -26,14 +28,14 @@ const props = defineProps<{
 	user: misskey.entities.User;
 }>();
 
-let chart = $ref(null);
+let chart = ref(null);
 
 os.apiGet("charts/user/notes", {
 	userId: props.user.id,
 	limit: 16,
 	span: "day",
 }).then((res) => {
-	chart = res;
+	chart.value = res;
 });
 </script>
 
diff --git a/packages/client/src/pages/admin/overview.users.vue b/packages/client/src/pages/admin/overview.users.vue
index 9017eb2a2c..30f60e7482 100644
--- a/packages/client/src/pages/admin/overview.users.vue
+++ b/packages/client/src/pages/admin/overview.users.vue
@@ -25,8 +25,8 @@ import * as os from "@/os";
 import { useInterval } from "@/scripts/use-interval";
 import MkUserCardMini from "@/components/MkUserCardMini.vue";
 
-let newUsers = $ref(null);
-let fetching = $ref(true);
+let newUsers = ref(null);
+let fetching = ref(true);
 
 const fetch = async () => {
 	const _newUsers = await os.api("admin/show-users", {
@@ -34,8 +34,8 @@ const fetch = async () => {
 		sort: "+createdAt",
 		origin: "local",
 	});
-	newUsers = _newUsers;
-	fetching = false;
+	newUsers.value = _newUsers;
+	fetching.value = false;
 };
 
 useInterval(fetch, 1000 * 60, {
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index d880225950..ed71723713 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -60,13 +60,7 @@
 </template>
 
 <script lang="ts" setup>
-import {
-	markRaw,
-	version as vueVersion,
-	onMounted,
-	onBeforeUnmount,
-	nextTick,
-} from "vue";
+import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, , shallowRef, ref, computed } from 'vue';
 import XFederation from "./overview.federation.vue";
 import XInstances from "./overview.instances.vue";
 import XQueue from "./overview.queue.vue";
@@ -87,16 +81,16 @@ import { defaultStore } from "@/store";
 import MkFileListForAdmin from "@/components/MkFileListForAdmin.vue";
 import MkFolder from "@/components/MkFolder.vue";
 
-const rootEl = $shallowRef<HTMLElement>();
-let serverInfo: any = $ref(null);
-let topSubInstancesForPie: any = $ref(null);
-let topPubInstancesForPie: any = $ref(null);
-let federationPubActive = $ref<number | null>(null);
-let federationPubActiveDiff = $ref<number | null>(null);
-let federationSubActive = $ref<number | null>(null);
-let federationSubActiveDiff = $ref<number | null>(null);
-let newUsers = $ref(null);
-let activeInstances = $shallowRef(null);
+const rootEl = shallowRef<HTMLElement>();
+let serverInfo: any = ref(null);
+let topSubInstancesForPie: any = ref(null);
+let topPubInstancesForPie: any = ref(null);
+let federationPubActive = ref<number | null>(null);
+let federationPubActiveDiff = ref<number | null>(null);
+let federationSubActive = ref<number | null>(null);
+let federationSubActiveDiff = ref<number | null>(null);
+let newUsers = ref(null);
+let activeInstances = shallowRef(null);
 const queueStatsConnection = markRaw(stream.useChannel("queueStats"));
 const now = new Date();
 const filesPagination = {
@@ -121,14 +115,14 @@ onMounted(async () => {
 	*/
 
 	os.apiGet("charts/federation", { limit: 2, span: "day" }).then((chart) => {
-		federationPubActive = chart.pubActive[0];
-		federationPubActiveDiff = chart.pubActive[0] - chart.pubActive[1];
-		federationSubActive = chart.subActive[0];
-		federationSubActiveDiff = chart.subActive[0] - chart.subActive[1];
+		federationPubActive.value = chart.pubActive[0];
+		federationPubActiveDiff.value = chart.pubActive[0] - chart.pubActive[1];
+		federationSubActive.value = chart.subActive[0];
+		federationSubActiveDiff.value = chart.subActive[0] - chart.subActive[1];
 	});
 
 	os.apiGet("federation/stats", { limit: 10 }).then((res) => {
-		topSubInstancesForPie = res.topSubInstances
+		topSubInstancesForPie.value = res.topSubInstances
 			.map((x) => ({
 				name: x.host,
 				color: x.themeColor,
@@ -144,7 +138,7 @@ onMounted(async () => {
 					value: res.otherFollowersCount,
 				},
 			]);
-		topPubInstancesForPie = res.topPubInstances
+		topPubInstancesForPie.value = res.topPubInstances
 			.map((x) => ({
 				name: x.host,
 				color: x.themeColor,
@@ -163,21 +157,21 @@ onMounted(async () => {
 	});
 
 	os.api("admin/server-info").then((serverInfoResponse) => {
-		serverInfo = serverInfoResponse;
+		serverInfo.value = serverInfoResponse;
 	});
 
 	os.api("admin/show-users", {
 		limit: 5,
 		sort: "+createdAt",
 	}).then((res) => {
-		newUsers = res;
+		newUsers.value = res;
 	});
 
 	os.api("federation/instances", {
 		sort: "+latestRequestReceivedAt",
 		limit: 25,
 	}).then((res) => {
-		activeInstances = res;
+		activeInstances.value = res;
 	});
 
 	nextTick(() => {
@@ -192,9 +186,9 @@ onBeforeUnmount(() => {
 	queueStatsConnection.dispose();
 });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.dashboard,
diff --git a/packages/client/src/pages/admin/promotions.vue b/packages/client/src/pages/admin/promotions.vue
index eb14fa52fc..c8147bb8df 100644
--- a/packages/client/src/pages/admin/promotions.vue
+++ b/packages/client/src/pages/admin/promotions.vue
@@ -63,6 +63,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, computed } from "vue";
+
 import {} from "vue";
 import MkButton from "@/components/MkButton.vue";
 import MkInput from "@/components/form/input.vue";
@@ -74,13 +76,13 @@ import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { formatDateTimeString } from "@/scripts/format-time-string";
 
-let ads: any[] = $ref([]);
+let ads: any[] = ref([]);
 
 os.api("admin/ad/list").then((adsResponse) => {
-	ads = adsResponse;
+	ads.value = adsResponse;
 	// The date format should be changed to yyyy-MM-dd in order to be properly displayed
-	for (let i in ads) {
-		ads[i].expiresAt = ads[i].expiresAt.substr(0, 10);
+	for (let i in ads.value) {
+		ads.value[i].expiresAt = ads.value[i].expiresAt.substr(0, 10);
 	}
 });
 
@@ -89,7 +91,7 @@ function add() {
 		new Date(new Date().setDate(new Date().getDate() + 1)),
 		"yyyy-MM-dd",
 	);
-	ads.unshift({
+	ads.value.unshift({
 		id: null,
 		memo: "",
 		place: "widget",
@@ -107,7 +109,7 @@ function remove(ad) {
 		text: i18n.t("removeAreYouSure", { x: ad.url }),
 	}).then(({ canceled }) => {
 		if (canceled) return;
-		ads = ads.filter((x) => x !== ad);
+		ads.value = ads.value.filter((x) => x !== ad);
 		os.apiWithDialog("admin/ad/delete", {
 			id: ad.id,
 		});
@@ -128,7 +130,7 @@ function save(ad) {
 	}
 }
 
-const headerActions = $computed(() => [
+const headerActions = computed(() => [
 	{
 		asFullButton: true,
 		icon: "ph-plus ph-bold ph-lg",
@@ -137,7 +139,7 @@ const headerActions = $computed(() => [
 	},
 ]);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.ads,
diff --git a/packages/client/src/pages/admin/proxy-account.vue b/packages/client/src/pages/admin/proxy-account.vue
index 7d72b0ac0f..ae0502d3cd 100644
--- a/packages/client/src/pages/admin/proxy-account.vue
+++ b/packages/client/src/pages/admin/proxy-account.vue
@@ -35,6 +35,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, computed } from "vue";
+
 import {} from "vue";
 import MkKeyValue from "@/components/MkKeyValue.vue";
 import MkButton from "@/components/MkButton.vue";
@@ -45,28 +47,30 @@ import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-let proxyAccount: any = $ref(null);
-let proxyAccountId: any = $ref(null);
+let proxyAccount: any = ref(null);
+let proxyAccountId: any = ref(null);
 
 async function init() {
 	const meta = await os.api("admin/meta");
-	proxyAccountId = meta.proxyAccountId;
-	if (proxyAccountId) {
-		proxyAccount = await os.api("users/show", { userId: proxyAccountId });
+	proxyAccountId.value = meta.proxyAccountId;
+	if (proxyAccountId.value) {
+		proxyAccount.value = await os.api("users/show", {
+			userId: proxyAccountId.value,
+		});
 	}
 }
 
 function chooseProxyAccount() {
 	os.selectLocalUser().then((user) => {
-		proxyAccount = user;
-		proxyAccountId = user.id;
+		proxyAccount.value = user;
+		proxyAccountId.value = user.id;
 		save();
 	});
 }
 
 function save() {
 	os.apiWithDialog("admin/update-meta", {
-		proxyAccountId: proxyAccountId,
+		proxyAccountId: proxyAccountId.value,
 	}).then(() => {
 		fetchInstance();
 	});
@@ -80,9 +84,9 @@ function del() {
 	});
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.proxyAccount,
diff --git a/packages/client/src/pages/admin/queue.chart.vue b/packages/client/src/pages/admin/queue.chart.vue
index 2b6f271c60..b220201d3d 100644
--- a/packages/client/src/pages/admin/queue.chart.vue
+++ b/packages/client/src/pages/admin/queue.chart.vue
@@ -72,10 +72,10 @@ const active = ref(0);
 const delayed = ref(0);
 const waiting = ref(0);
 const jobs = ref([]);
-let chartProcess = $ref<InstanceType<typeof XChart>>();
-let chartActive = $ref<InstanceType<typeof XChart>>();
-let chartDelayed = $ref<InstanceType<typeof XChart>>();
-let chartWaiting = $ref<InstanceType<typeof XChart>>();
+let chartProcess = ref<InstanceType<typeof XChart>>();
+let chartActive = ref<InstanceType<typeof XChart>>();
+let chartDelayed = ref<InstanceType<typeof XChart>>();
+let chartWaiting = ref<InstanceType<typeof XChart>>();
 
 const props = defineProps<{
 	domain: string;
@@ -87,10 +87,10 @@ const onStats = (stats) => {
 	delayed.value = stats[props.domain].delayed;
 	waiting.value = stats[props.domain].waiting;
 
-	chartProcess.pushData(stats[props.domain].activeSincePrevTick);
-	chartActive.pushData(stats[props.domain].active);
-	chartDelayed.pushData(stats[props.domain].delayed);
-	chartWaiting.pushData(stats[props.domain].waiting);
+	chartProcess.value.pushData(stats[props.domain].activeSincePrevTick);
+	chartActive.value.pushData(stats[props.domain].active);
+	chartDelayed.value.pushData(stats[props.domain].delayed);
+	chartWaiting.value.pushData(stats[props.domain].waiting);
 };
 
 const onStatsLog = (statsLog) => {
@@ -106,10 +106,10 @@ const onStatsLog = (statsLog) => {
 		dataWaiting.push(stats[props.domain].waiting);
 	}
 
-	chartProcess.setData(dataProcess);
-	chartActive.setData(dataActive);
-	chartDelayed.setData(dataDelayed);
-	chartWaiting.setData(dataWaiting);
+	chartProcess.value.setData(dataProcess);
+	chartActive.value.setData(dataActive);
+	chartDelayed.value.setData(dataDelayed);
+	chartWaiting.value.setData(dataWaiting);
 };
 
 onMounted(() => {
diff --git a/packages/client/src/pages/admin/queue.vue b/packages/client/src/pages/admin/queue.vue
index b8920f332a..15a6bdcf02 100644
--- a/packages/client/src/pages/admin/queue.vue
+++ b/packages/client/src/pages/admin/queue.vue
@@ -15,7 +15,14 @@
 </template>
 
 <script lang="ts" setup>
-import { markRaw, onMounted, onBeforeUnmount, nextTick } from "vue";
+import {
+	markRaw,
+	onMounted,
+	onBeforeUnmount,
+	nextTick,
+	ref,
+	computed,
+} from "vue";
 import XQueue from "./queue.chart.vue";
 import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
@@ -23,7 +30,7 @@ import * as config from "@/config";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-let tab = $ref("deliver");
+let tab = ref("deliver");
 
 function clear() {
 	os.confirm({
@@ -37,7 +44,7 @@ function clear() {
 	});
 }
 
-const headerActions = $computed(() => [
+const headerActions = computed(() => [
 	{
 		asFullButton: true,
 		icon: "ph-arrow-square-up-right ph-bold ph-lg",
@@ -48,7 +55,7 @@ const headerActions = $computed(() => [
 	},
 ]);
 
-const headerTabs = $computed(() => [
+const headerTabs = computed(() => [
 	{
 		key: "deliver",
 		title: "Deliver",
diff --git a/packages/client/src/pages/admin/relays.vue b/packages/client/src/pages/admin/relays.vue
index 34f76db697..948336eb2c 100644
--- a/packages/client/src/pages/admin/relays.vue
+++ b/packages/client/src/pages/admin/relays.vue
@@ -43,13 +43,15 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, computed } from "vue";
+
 import {} from "vue";
 import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-let relays: any[] = $ref([]);
+let relays: any[] = ref([]);
 
 async function addRelay() {
 	const { canceled, result: inbox } = await os.inputText({
@@ -89,13 +91,13 @@ function remove(inbox: string) {
 
 function refresh() {
 	os.api("admin/relays/list").then((relayList: any) => {
-		relays = relayList;
+		relays.value = relayList;
 	});
 }
 
 refresh();
 
-const headerActions = $computed(() => [
+const headerActions = computed(() => [
 	{
 		asFullButton: true,
 		icon: "ph-plus ph-bold ph-lg",
@@ -104,7 +106,7 @@ const headerActions = $computed(() => [
 	},
 ]);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.relays,
diff --git a/packages/client/src/pages/admin/security.vue b/packages/client/src/pages/admin/security.vue
index b93c803611..1c3f2e5826 100644
--- a/packages/client/src/pages/admin/security.vue
+++ b/packages/client/src/pages/admin/security.vue
@@ -255,6 +255,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, computed } from "vue";
+
 import {} from "vue";
 import XBotProtection from "./bot-protection.vue";
 import FormFolder from "@/components/form/folder.vue";
@@ -271,27 +273,27 @@ import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-let summalyProxy: string = $ref("");
-let enableHcaptcha: boolean = $ref(false);
-let enableRecaptcha: boolean = $ref(false);
-let sensitiveMediaDetection: string = $ref("none");
-let sensitiveMediaDetectionSensitivity: number = $ref(0);
-let setSensitiveFlagAutomatically: boolean = $ref(false);
-let enableSensitiveMediaDetectionForVideos: boolean = $ref(false);
-let enableIpLogging: boolean = $ref(false);
-let enableActiveEmailValidation: boolean = $ref(false);
+let summalyProxy: string = ref("");
+let enableHcaptcha: boolean = ref(false);
+let enableRecaptcha: boolean = ref(false);
+let sensitiveMediaDetection: string = ref("none");
+let sensitiveMediaDetectionSensitivity: number = ref(0);
+let setSensitiveFlagAutomatically: boolean = ref(false);
+let enableSensitiveMediaDetectionForVideos: boolean = ref(false);
+let enableIpLogging: boolean = ref(false);
+let enableActiveEmailValidation: boolean = ref(false);
 
-let secureMode: boolean = $ref(false);
-let privateMode: boolean = $ref(false);
-let allowedHosts: string = $ref("");
+let secureMode: boolean = ref(false);
+let privateMode: boolean = ref(false);
+let allowedHosts: string = ref("");
 
 async function init() {
 	const meta = await os.api("admin/meta");
-	summalyProxy = meta.summalyProxy;
-	enableHcaptcha = meta.enableHcaptcha;
-	enableRecaptcha = meta.enableRecaptcha;
-	sensitiveMediaDetection = meta.sensitiveMediaDetection;
-	sensitiveMediaDetectionSensitivity =
+	summalyProxy.value = meta.summalyProxy;
+	enableHcaptcha.value = meta.enableHcaptcha;
+	enableRecaptcha.value = meta.enableRecaptcha;
+	sensitiveMediaDetection.value = meta.sensitiveMediaDetection;
+	sensitiveMediaDetectionSensitivity.value =
 		meta.sensitiveMediaDetectionSensitivity === "veryLow"
 			? 0
 			: meta.sensitiveMediaDetectionSensitivity === "low"
@@ -303,37 +305,38 @@ async function init() {
 			: meta.sensitiveMediaDetectionSensitivity === "veryHigh"
 			? 4
 			: 0;
-	setSensitiveFlagAutomatically = meta.setSensitiveFlagAutomatically;
-	enableSensitiveMediaDetectionForVideos =
+	setSensitiveFlagAutomatically.value = meta.setSensitiveFlagAutomatically;
+	enableSensitiveMediaDetectionForVideos.value =
 		meta.enableSensitiveMediaDetectionForVideos;
-	enableIpLogging = meta.enableIpLogging;
-	enableActiveEmailValidation = meta.enableActiveEmailValidation;
+	enableIpLogging.value = meta.enableIpLogging;
+	enableActiveEmailValidation.value = meta.enableActiveEmailValidation;
 
-	secureMode = meta.secureMode;
-	privateMode = meta.privateMode;
-	allowedHosts = meta.allowedHosts.join("\n");
+	secureMode.value = meta.secureMode;
+	privateMode.value = meta.privateMode;
+	allowedHosts.value = meta.allowedHosts.join("\n");
 }
 
 function save() {
 	os.apiWithDialog("admin/update-meta", {
-		summalyProxy,
-		sensitiveMediaDetection,
+		summalyProxy: summalyProxy.value,
+		sensitiveMediaDetection: sensitiveMediaDetection.value,
 		sensitiveMediaDetectionSensitivity:
-			sensitiveMediaDetectionSensitivity === 0
+			sensitiveMediaDetectionSensitivity.value === 0
 				? "veryLow"
-				: sensitiveMediaDetectionSensitivity === 1
+				: sensitiveMediaDetectionSensitivity.value === 1
 				? "low"
-				: sensitiveMediaDetectionSensitivity === 2
+				: sensitiveMediaDetectionSensitivity.value === 2
 				? "medium"
-				: sensitiveMediaDetectionSensitivity === 3
+				: sensitiveMediaDetectionSensitivity.value === 3
 				? "high"
-				: sensitiveMediaDetectionSensitivity === 4
+				: sensitiveMediaDetectionSensitivity.value === 4
 				? "veryHigh"
 				: 0,
-		setSensitiveFlagAutomatically,
-		enableSensitiveMediaDetectionForVideos,
-		enableIpLogging,
-		enableActiveEmailValidation,
+		setSensitiveFlagAutomatically: setSensitiveFlagAutomatically.value,
+		enableSensitiveMediaDetectionForVideos:
+			enableSensitiveMediaDetectionForVideos.value,
+		enableIpLogging: enableIpLogging.value,
+		enableActiveEmailValidation: enableActiveEmailValidation.value,
 	}).then(() => {
 		fetchInstance();
 	});
@@ -341,17 +344,17 @@ function save() {
 
 function saveInstance() {
 	os.apiWithDialog("admin/update-meta", {
-		secureMode,
-		privateMode,
-		allowedHosts: allowedHosts.split("\n"),
+		secureMode: secureMode.value,
+		privateMode: privateMode.value,
+		allowedHosts: allowedHosts.value.split("\n"),
 	}).then(() => {
 		fetchInstance();
 	});
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.security,
diff --git a/packages/client/src/pages/admin/settings.vue b/packages/client/src/pages/admin/settings.vue
index a33335089a..9b47214c0d 100644
--- a/packages/client/src/pages/admin/settings.vue
+++ b/packages/client/src/pages/admin/settings.vue
@@ -428,7 +428,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import FormSwitch from "@/components/form/switch.vue";
 import FormInput from "@/components/form/input.vue";
 import FormTextarea from "@/components/form/textarea.vue";
@@ -442,134 +442,138 @@ import { fetchInstance } from "@/instance";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-let name: string | null = $ref(null);
-let description: string | null = $ref(null);
-let tosUrl: string | null = $ref(null);
-let maintainerName: string | null = $ref(null);
-let maintainerEmail: string | null = $ref(null);
-let donationLink: string | null = $ref(null);
-let iconUrl: string | null = $ref(null);
-let bannerUrl: string | null = $ref(null);
-let logoImageUrl: string | null = $ref(null);
-let backgroundImageUrl: string | null = $ref(null);
-let themeColor: any = $ref(null);
-let defaultLightTheme: any = $ref(null);
-let defaultDarkTheme: any = $ref(null);
-let enableLocalTimeline: boolean = $ref(false);
-let enableGlobalTimeline: boolean = $ref(false);
-let enableRecommendedTimeline: boolean = $ref(false);
-let pinnedUsers: string = $ref("");
-let customMOTD: string = $ref("");
-let recommendedInstances: string = $ref("");
-let customSplashIcons: string = $ref("");
-let cacheRemoteFiles: boolean = $ref(false);
-let localDriveCapacityMb: any = $ref(0);
-let remoteDriveCapacityMb: any = $ref(0);
-let enableRegistration: boolean = $ref(false);
-let emailRequiredForSignup: boolean = $ref(false);
-let enableServiceWorker: boolean = $ref(false);
-let swPublicKey: any = $ref(null);
-let swPrivateKey: any = $ref(null);
-let deeplAuthKey: string = $ref("");
-let deeplIsPro: boolean = $ref(false);
-let libreTranslateApiUrl: string = $ref("");
-let libreTranslateApiKey: string = $ref("");
-let defaultReaction: string = $ref("");
-let defaultReactionCustom: string = $ref("");
-let enableServerMachineStats: boolean = $ref(false);
-let enableIdenticonGeneration: boolean = $ref(false);
+let name: string | null = ref(null);
+let description: string | null = ref(null);
+let tosUrl: string | null = ref(null);
+let maintainerName: string | null = ref(null);
+let maintainerEmail: string | null = ref(null);
+let donationLink: string | null = ref(null);
+let iconUrl: string | null = ref(null);
+let bannerUrl: string | null = ref(null);
+let logoImageUrl: string | null = ref(null);
+let backgroundImageUrl: string | null = ref(null);
+let themeColor: any = ref(null);
+let defaultLightTheme: any = ref(null);
+let defaultDarkTheme: any = ref(null);
+let enableLocalTimeline: boolean = ref(false);
+let enableGlobalTimeline: boolean = ref(false);
+let enableRecommendedTimeline: boolean = ref(false);
+let pinnedUsers: string = ref("");
+let customMOTD: string = ref("");
+let recommendedInstances: string = ref("");
+let customSplashIcons: string = ref("");
+let cacheRemoteFiles: boolean = ref(false);
+let localDriveCapacityMb: any = ref(0);
+let remoteDriveCapacityMb: any = ref(0);
+let enableRegistration: boolean = ref(false);
+let emailRequiredForSignup: boolean = ref(false);
+let enableServiceWorker: boolean = ref(false);
+let swPublicKey: any = ref(null);
+let swPrivateKey: any = ref(null);
+let deeplAuthKey: string = ref("");
+let deeplIsPro: boolean = ref(false);
+let libreTranslateApiUrl: string = ref("");
+let libreTranslateApiKey: string = ref("");
+let defaultReaction: string = ref("");
+let defaultReactionCustom: string = ref("");
+let enableServerMachineStats: boolean = ref(false);
+let enableIdenticonGeneration: boolean = ref(false);
 
 async function init() {
 	const meta = await os.api("admin/meta");
 	if (!meta) throw new Error("No meta");
-	name = meta.name;
-	description = meta.description;
-	tosUrl = meta.tosUrl;
-	iconUrl = meta.iconUrl;
-	bannerUrl = meta.bannerUrl;
-	logoImageUrl = meta.logoImageUrl;
-	backgroundImageUrl = meta.backgroundImageUrl;
-	themeColor = meta.themeColor;
-	defaultLightTheme = meta.defaultLightTheme;
-	defaultDarkTheme = meta.defaultDarkTheme;
-	maintainerName = meta.maintainerName;
-	maintainerEmail = meta.maintainerEmail;
-	donationLink = meta.donationLink;
-	enableLocalTimeline = !meta.disableLocalTimeline;
-	enableGlobalTimeline = !meta.disableGlobalTimeline;
-	enableRecommendedTimeline = !meta.disableRecommendedTimeline;
-	pinnedUsers = meta.pinnedUsers.join("\n");
-	customMOTD = meta.customMOTD.join("\n");
-	customSplashIcons = meta.customSplashIcons.join("\n");
-	recommendedInstances = meta.recommendedInstances.join("\n");
-	cacheRemoteFiles = meta.cacheRemoteFiles;
-	localDriveCapacityMb = meta.driveCapacityPerLocalUserMb;
-	remoteDriveCapacityMb = meta.driveCapacityPerRemoteUserMb;
-	enableRegistration = !meta.disableRegistration;
-	emailRequiredForSignup = meta.emailRequiredForSignup;
-	enableServiceWorker = meta.enableServiceWorker;
-	swPublicKey = meta.swPublickey;
-	swPrivateKey = meta.swPrivateKey;
-	deeplAuthKey = meta.deeplAuthKey;
-	deeplIsPro = meta.deeplIsPro;
-	libreTranslateApiUrl = meta.libreTranslateApiUrl;
-	libreTranslateApiKey = meta.libreTranslateApiKey;
-	defaultReaction = ["⭐", "👍", "❤️"].includes(meta.defaultReaction)
+	name.value = meta.name;
+	description.value = meta.description;
+	tosUrl.value = meta.tosUrl;
+	iconUrl.value = meta.iconUrl;
+	bannerUrl.value = meta.bannerUrl;
+	logoImageUrl.value = meta.logoImageUrl;
+	backgroundImageUrl.value = meta.backgroundImageUrl;
+	themeColor.value = meta.themeColor;
+	defaultLightTheme.value = meta.defaultLightTheme;
+	defaultDarkTheme.value = meta.defaultDarkTheme;
+	maintainerName.value = meta.maintainerName;
+	maintainerEmail.value = meta.maintainerEmail;
+	donationLink.value = meta.donationLink;
+	enableLocalTimeline.value = !meta.disableLocalTimeline;
+	enableGlobalTimeline.value = !meta.disableGlobalTimeline;
+	enableRecommendedTimeline.value = !meta.disableRecommendedTimeline;
+	pinnedUsers.value = meta.pinnedUsers.join("\n");
+	customMOTD.value = meta.customMOTD.join("\n");
+	customSplashIcons.value = meta.customSplashIcons.join("\n");
+	recommendedInstances.value = meta.recommendedInstances.join("\n");
+	cacheRemoteFiles.value = meta.cacheRemoteFiles;
+	localDriveCapacityMb.value = meta.driveCapacityPerLocalUserMb;
+	remoteDriveCapacityMb.value = meta.driveCapacityPerRemoteUserMb;
+	enableRegistration.value = !meta.disableRegistration;
+	emailRequiredForSignup.value = meta.emailRequiredForSignup;
+	enableServiceWorker.value = meta.enableServiceWorker;
+	swPublicKey.value = meta.swPublickey;
+	swPrivateKey.value = meta.swPrivateKey;
+	deeplAuthKey.value = meta.deeplAuthKey;
+	deeplIsPro.value = meta.deeplIsPro;
+	libreTranslateApiUrl.value = meta.libreTranslateApiUrl;
+	libreTranslateApiKey.value = meta.libreTranslateApiKey;
+	defaultReaction.value = ["⭐", "👍", "❤️"].includes(meta.defaultReaction)
 		? meta.defaultReaction
 		: "custom";
-	defaultReactionCustom = ["⭐", "👍", "❤️"].includes(meta.defaultReaction)
+	defaultReactionCustom.value = ["⭐", "👍", "❤️"].includes(
+		meta.defaultReaction,
+	)
 		? ""
 		: meta.defaultReaction;
-	enableServerMachineStats = meta.enableServerMachineStats;
-	enableIdenticonGeneration = meta.enableIdenticonGeneration;
+	enableServerMachineStats.value = meta.enableServerMachineStats;
+	enableIdenticonGeneration.value = meta.enableIdenticonGeneration;
 }
 
 function save() {
-	if (defaultReaction === "custom") {
-		defaultReaction = defaultReactionCustom;
+	if (defaultReaction.value === "custom") {
+		defaultReaction.value = defaultReactionCustom.value;
 	}
 	os.apiWithDialog("admin/update-meta", {
-		name,
-		description,
-		tosUrl,
-		iconUrl,
-		bannerUrl,
-		logoImageUrl,
-		backgroundImageUrl,
-		themeColor: themeColor === "" ? null : themeColor,
-		defaultLightTheme: defaultLightTheme === "" ? null : defaultLightTheme,
-		defaultDarkTheme: defaultDarkTheme === "" ? null : defaultDarkTheme,
-		maintainerName,
-		maintainerEmail,
-		donationLink,
-		disableLocalTimeline: !enableLocalTimeline,
-		disableGlobalTimeline: !enableGlobalTimeline,
-		disableRecommendedTimeline: !enableRecommendedTimeline,
-		pinnedUsers: pinnedUsers.split("\n"),
-		customMOTD: customMOTD.split("\n"),
-		customSplashIcons: customSplashIcons.split("\n"),
-		recommendedInstances: recommendedInstances.split("\n"),
-		cacheRemoteFiles,
-		localDriveCapacityMb: parseInt(localDriveCapacityMb, 10),
-		remoteDriveCapacityMb: parseInt(remoteDriveCapacityMb, 10),
-		disableRegistration: !enableRegistration,
-		emailRequiredForSignup,
-		enableServiceWorker,
-		swPublicKey,
-		swPrivateKey,
-		deeplAuthKey,
-		deeplIsPro,
-		libreTranslateApiUrl,
-		libreTranslateApiKey,
-		defaultReaction,
-		enableServerMachineStats,
-		enableIdenticonGeneration,
+		name: name.value,
+		description: description.value,
+		tosUrl: tosUrl.value,
+		iconUrl: iconUrl.value,
+		bannerUrl: bannerUrl.value,
+		logoImageUrl: logoImageUrl.value,
+		backgroundImageUrl: backgroundImageUrl.value,
+		themeColor: themeColor.value === "" ? null : themeColor.value,
+		defaultLightTheme:
+			defaultLightTheme.value === "" ? null : defaultLightTheme.value,
+		defaultDarkTheme:
+			defaultDarkTheme.value === "" ? null : defaultDarkTheme.value,
+		maintainerName: maintainerName.value,
+		maintainerEmail: maintainerEmail.value,
+		donationLink: donationLink.value,
+		disableLocalTimeline: !enableLocalTimeline.value,
+		disableGlobalTimeline: !enableGlobalTimeline.value,
+		disableRecommendedTimeline: !enableRecommendedTimeline.value,
+		pinnedUsers: pinnedUsers.value.split("\n"),
+		customMOTD: customMOTD.value.split("\n"),
+		customSplashIcons: customSplashIcons.value.split("\n"),
+		recommendedInstances: recommendedInstances.value.split("\n"),
+		cacheRemoteFiles: cacheRemoteFiles.value,
+		localDriveCapacityMb: parseInt(localDriveCapacityMb.value, 10),
+		remoteDriveCapacityMb: parseInt(remoteDriveCapacityMb.value, 10),
+		disableRegistration: !enableRegistration.value,
+		emailRequiredForSignup: emailRequiredForSignup.value,
+		enableServiceWorker: enableServiceWorker.value,
+		swPublicKey: swPublicKey.value,
+		swPrivateKey: swPrivateKey.value,
+		deeplAuthKey: deeplAuthKey.value,
+		deeplIsPro: deeplIsPro.value,
+		libreTranslateApiUrl: libreTranslateApiUrl.value,
+		libreTranslateApiKey: libreTranslateApiKey.value,
+		defaultReaction: defaultReaction.value,
+		enableServerMachineStats: enableServerMachineStats.value,
+		enableIdenticonGeneration: enableIdenticonGeneration.value,
 	}).then(() => {
 		fetchInstance();
 	});
 }
 
-const headerActions = $computed(() => [
+const headerActions = computed(() => [
 	{
 		asFullButton: true,
 		icon: "ph-check ph-bold ph-lg",
@@ -578,7 +582,7 @@ const headerActions = $computed(() => [
 	},
 ]);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.general,
diff --git a/packages/client/src/pages/admin/users.vue b/packages/client/src/pages/admin/users.vue
index 82d98462a8..f7afa558c8 100644
--- a/packages/client/src/pages/admin/users.vue
+++ b/packages/client/src/pages/admin/users.vue
@@ -123,7 +123,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import MkInput from "@/components/form/input.vue";
 import MkSelect from "@/components/form/select.vue";
 import MkPagination from "@/components/MkPagination.vue";
@@ -133,22 +133,22 @@ import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import MkUserCardMini from "@/components/MkUserCardMini.vue";
 
-let paginationComponent = $ref<InstanceType<typeof MkPagination>>();
+let paginationComponent = ref<InstanceType<typeof MkPagination>>();
 
-let sort = $ref("+createdAt");
-let state = $ref("all");
-let origin = $ref("local");
-let searchUsername = $ref("");
-let searchHost = $ref("");
+let sort = ref("+createdAt");
+let state = ref("all");
+let origin = ref("local");
+let searchUsername = ref("");
+let searchHost = ref("");
 const pagination = {
 	endpoint: "admin/show-users" as const,
 	limit: 10,
 	params: computed(() => ({
-		sort: sort,
-		state: state,
-		origin: origin,
-		username: searchUsername,
-		hostname: searchHost,
+		sort: sort.value,
+		state: state.value,
+		origin: origin.value,
+		username: searchUsername.value,
+		hostname: searchHost.value,
 	})),
 	offsetMode: true,
 };
@@ -175,7 +175,7 @@ async function addUser() {
 		username: username,
 		password: password,
 	}).then((res) => {
-		paginationComponent.reload();
+		paginationComponent.value.reload();
 	});
 }
 
@@ -183,7 +183,7 @@ function show(user) {
 	os.pageWindow(`/user-info/${user.id}`);
 }
 
-const headerActions = $computed(() => [
+const headerActions = computed(() => [
 	{
 		icon: "ph-magnifying-glass ph-bold ph-lg",
 		text: i18n.ts.search,
@@ -203,7 +203,7 @@ const headerActions = $computed(() => [
 	},
 ]);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata(
 	computed(() => ({
diff --git a/packages/client/src/pages/announcements.vue b/packages/client/src/pages/announcements.vue
index b672a4bd6f..e60b56d8dc 100644
--- a/packages/client/src/pages/announcements.vue
+++ b/packages/client/src/pages/announcements.vue
@@ -45,7 +45,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import MkPagination from "@/components/MkPagination.vue";
 import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
@@ -67,9 +67,9 @@ function read(id: string) {
 	os.api("i/read-announcement", { announcementId: id });
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.announcements,
diff --git a/packages/client/src/pages/antenna-timeline.vue b/packages/client/src/pages/antenna-timeline.vue
index 011e44ce6d..0fb93c7a0b 100644
--- a/packages/client/src/pages/antenna-timeline.vue
+++ b/packages/client/src/pages/antenna-timeline.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, watch } from "vue";
+import { computed, inject, watch, ref } from "vue";
 import XTimeline from "@/components/MkTimeline.vue";
 import * as os from "@/os";
 import { useRouter } from "@/router";
@@ -37,10 +37,10 @@ const props = defineProps<{
 	antennaId: string;
 }>();
 
-let antenna = $ref(null);
-let rootEl = $ref<HTMLElement>();
-let tlEl = $ref<InstanceType<typeof XTimeline>>();
-const keymap = $computed(() => ({
+let antenna = ref(null);
+let rootEl = ref<HTMLElement>();
+let tlEl = ref<InstanceType<typeof XTimeline>>();
+const keymap = computed(() => ({
 	t: focus,
 }));
 
@@ -50,7 +50,7 @@ async function timetravel() {
 	});
 	if (canceled) return;
 
-	tlEl.timetravel(date);
+	tlEl.value.timetravel(date);
 }
 
 function settings() {
@@ -74,21 +74,21 @@ async function markRead() {
 }
 
 function focus() {
-	tlEl.focus();
+	tlEl.value.focus();
 }
 
 watch(
 	() => props.antennaId,
 	async () => {
-		antenna = await os.api("antennas/show", {
+		antenna.value = await os.api("antennas/show", {
 			antennaId: props.antennaId,
 		});
 	},
 	{ immediate: true },
 );
 
-const headerActions = $computed(() =>
-	antenna
+const headerActions = computed(() =>
+	antenna.value
 		? [
 				// {
 				// 	icon: "ph-calendar-blank ph-bold ph-lg",
@@ -109,13 +109,13 @@ const headerActions = $computed(() =>
 		: [],
 );
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata(
 	computed(() =>
-		antenna
+		antenna.value
 			? {
-					title: antenna.name,
+					title: antenna.value.name,
 					icon: "ph-flying-saucer ph-bold ph-lg",
 			  }
 			: null,
diff --git a/packages/client/src/pages/api-console.vue b/packages/client/src/pages/api-console.vue
index 919d81d71d..f8b9ae38b0 100644
--- a/packages/client/src/pages/api-console.vue
+++ b/packages/client/src/pages/api-console.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import JSON5 from "json5";
 import { Endpoints } from "firefish-js";
 import MkButton from "@/components/MkButton.vue";
@@ -109,9 +109,9 @@ function onEndpointChange() {
 	});
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: "API console",
diff --git a/packages/client/src/pages/channel-editor.vue b/packages/client/src/pages/channel-editor.vue
index 203c697706..5492dac296 100644
--- a/packages/client/src/pages/channel-editor.vue
+++ b/packages/client/src/pages/channel-editor.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, watch } from "vue";
+import { computed, inject, watch, ref } from "vue";
 import MkTextarea from "@/components/form/textarea.vue";
 import MkButton from "@/components/MkButton.vue";
 import MkInput from "@/components/form/input.vue";
@@ -56,21 +56,21 @@ const props = defineProps<{
 	channelId?: string;
 }>();
 
-let channel = $ref(null);
-let name = $ref(null);
-let description = $ref(null);
-let bannerUrl = $ref<string | null>(null);
-let bannerId = $ref<string | null>(null);
+let channel = ref(null);
+let name = ref(null);
+let description = ref(null);
+let bannerUrl = ref<string | null>(null);
+let bannerId = ref<string | null>(null);
 
 watch(
-	() => bannerId,
+	() => bannerId.value,
 	async () => {
-		if (bannerId == null) {
-			bannerUrl = null;
+		if (bannerId.value == null) {
+			bannerUrl.value = null;
 		} else {
-			bannerUrl = (
+			bannerUrl.value = (
 				await os.api("drive/files/show", {
-					fileId: bannerId,
+					fileId: bannerId.value,
 				})
 			).url;
 		}
@@ -80,23 +80,23 @@ watch(
 async function fetchChannel() {
 	if (props.channelId == null) return;
 
-	channel = await os.api("channels/show", {
+	channel.value = await os.api("channels/show", {
 		channelId: props.channelId,
 	});
 
-	name = channel.name;
-	description = channel.description;
-	bannerId = channel.bannerId;
-	bannerUrl = channel.bannerUrl;
+	name.value = channel.value.name;
+	description.value = channel.value.description;
+	bannerId.value = channel.value.bannerId;
+	bannerUrl.value = channel.value.bannerUrl;
 }
 
 fetchChannel();
 
 function save() {
 	const params = {
-		name: name,
-		description: description,
-		bannerId: bannerId,
+		name: name.value,
+		description: description.value,
+		bannerId: bannerId.value,
 	};
 
 	if (props.channelId) {
@@ -114,17 +114,17 @@ function save() {
 
 function setBannerImage(evt) {
 	selectFile(evt.currentTarget ?? evt.target, null).then((file) => {
-		bannerId = file.id;
+		bannerId.value = file.id;
 	});
 }
 
 function removeBannerImage() {
-	bannerId = null;
+	bannerId.value = null;
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata(
 	computed(() =>
diff --git a/packages/client/src/pages/channel.vue b/packages/client/src/pages/channel.vue
index 7040958290..974c779320 100644
--- a/packages/client/src/pages/channel.vue
+++ b/packages/client/src/pages/channel.vue
@@ -101,7 +101,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, watch } from "vue";
+import { computed, inject, watch, ref } from "vue";
 import MkContainer from "@/components/MkContainer.vue";
 import XPostForm from "@/components/MkPostForm.vue";
 import XTimeline from "@/components/MkTimeline.vue";
@@ -118,13 +118,13 @@ const props = defineProps<{
 	channelId: string;
 }>();
 
-let channel = $ref(null);
-let showBanner = $ref(true);
+let channel = ref(null);
+let showBanner = ref(true);
 
 watch(
 	() => props.channelId,
 	async () => {
-		channel = await os.api("channels/show", {
+		channel.value = await os.api("channels/show", {
 			channelId: props.channelId,
 		});
 	},
@@ -132,11 +132,11 @@ watch(
 );
 
 function edit() {
-	router.push(`/channels/${channel?.id}/edit`);
+	router.push(`/channels/${channel.value?.id}/edit`);
 }
 
-const headerActions = $computed(() => [
-	...(channel && channel?.userId === $i?.id
+const headerActions = computed(() => [
+	...(channel.value && channel.value?.userId === $i?.id
 		? [
 				{
 					icon: "ph-gear-six ph-bold ph-lg",
@@ -147,13 +147,13 @@ const headerActions = $computed(() => [
 		: []),
 ]);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata(
 	computed(() =>
-		channel
+		channel.value
 			? {
-					title: channel.name,
+					title: channel.value.name,
 					icon: "ph-television ph-bold ph-lg",
 			  }
 			: null,
diff --git a/packages/client/src/pages/channels.vue b/packages/client/src/pages/channels.vue
index 65f4dbf0cb..cc38ea304f 100644
--- a/packages/client/src/pages/channels.vue
+++ b/packages/client/src/pages/channels.vue
@@ -111,7 +111,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, defineComponent, inject, watch } from "vue";
+import { computed, onMounted, defineComponent, inject, watch, ref } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import MkChannelPreview from "@/components/MkChannelPreview.vue";
@@ -133,20 +133,20 @@ import "swiper/scss/virtual";
 const router = useRouter();
 
 const tabs = ["search", "featured", "following", "owned"];
-let tab = $ref(tabs[1]);
-watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
+let tab = ref(tabs[1]);
+watch(tab, () => syncSlide(tabs.indexOf(tab.value)));
 
 const props = defineProps<{
 	query: string;
 	type?: string;
 }>();
-let key = $ref("");
-let searchQuery = $ref("");
-let searchType = $ref("nameAndDescription");
-let channelPagination = $ref();
+let key = ref("");
+let searchQuery = ref("");
+let searchType = ref("nameAndDescription");
+let channelPagination = ref();
 onMounted(() => {
-	searchQuery = props.query ?? "";
-	searchType = props.type ?? "nameAndDescription";
+	searchQuery.value = props.query ?? "";
+	searchType.value = props.type ?? "nameAndDescription";
 });
 
 const featuredPagination = {
@@ -164,25 +164,25 @@ const ownedPagination = {
 };
 
 async function search() {
-	const query = searchQuery.toString().trim();
+	const query = searchQuery.value.toString().trim();
 	if (query == null || query === "") return;
-	const type = searchType.toString().trim();
-	channelPagination = {
+	const type = searchType.value.toString().trim();
+	channelPagination.value = {
 		endpoint: "channels/search",
 		limit: 10,
 		params: {
-			query: searchQuery,
+			query: searchQuery.value,
 			type: type,
 		},
 	};
-	key = query + type;
+	key.value = query + type;
 }
 
 function create() {
 	router.push("/channels/new");
 }
 
-const headerActions = $computed(() => [
+const headerActions = computed(() => [
 	{
 		icon: "ph-plus ph-bold ph-lg",
 		text: i18n.ts.create,
@@ -190,7 +190,7 @@ const headerActions = $computed(() => [
 	},
 ]);
 
-const headerTabs = $computed(() => [
+const headerTabs = computed(() => [
 	{
 		key: "search",
 		title: i18n.ts.search,
@@ -224,11 +224,11 @@ let swiperRef = null;
 
 function setSwiperRef(swiper) {
 	swiperRef = swiper;
-	syncSlide(tabs.indexOf(tab));
+	syncSlide(tabs.indexOf(tab.value));
 }
 
 function onSlideChange() {
-	tab = tabs[swiperRef.activeIndex];
+	tab.value = tabs[swiperRef.activeIndex];
 }
 
 function syncSlide(index) {
diff --git a/packages/client/src/pages/clip.vue b/packages/client/src/pages/clip.vue
index 6da2b85543..b630a91025 100644
--- a/packages/client/src/pages/clip.vue
+++ b/packages/client/src/pages/clip.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, provide } from "vue";
+import { computed, watch, provide, ref } from "vue";
 import type * as misskey from "firefish-js";
 import XNotes from "@/components/MkNotes.vue";
 import { $i } from "@/account";
@@ -40,7 +40,7 @@ const props = defineProps<{
 	clipId: string;
 }>();
 
-let clip: misskey.entities.Clip = $ref<misskey.entities.Clip>();
+let clip: misskey.entities.Clip = ref<misskey.entities.Clip>();
 const pagination = {
 	endpoint: "clips/notes" as const,
 	limit: 10,
@@ -49,14 +49,14 @@ const pagination = {
 	})),
 };
 
-const isOwned: boolean | null = $computed<boolean | null>(
-	() => $i && clip && $i.id === clip.userId,
+const isOwned: boolean | null = computed<boolean | null>(
+	() => $i && clip.value && $i.id === clip.value.userId,
 );
 
 watch(
 	() => props.clipId,
 	async () => {
-		clip = await os.api("clips/show", {
+		clip.value = await os.api("clips/show", {
 			clipId: props.clipId,
 		});
 	},
@@ -65,38 +65,41 @@ watch(
 	},
 );
 
-provide("currentClipPage", $$(clip));
+provide("currentClipPage", clip);
 
-const headerActions = $computed(() =>
-	clip && isOwned
+const headerActions = computed(() =>
+	clip.value && isOwned.value
 		? [
 				{
 					icon: "ph-pencil ph-bold ph-lg",
 					text: i18n.ts.edit,
 					handler: async (): Promise<void> => {
-						const { canceled, result } = await os.form(clip.name, {
-							name: {
-								type: "string",
-								label: i18n.ts.name,
-								default: clip.name,
+						const { canceled, result } = await os.form(
+							clip.value.name,
+							{
+								name: {
+									type: "string",
+									label: i18n.ts.name,
+									default: clip.value.name,
+								},
+								description: {
+									type: "string",
+									required: false,
+									multiline: true,
+									label: i18n.ts.description,
+									default: clip.value.description,
+								},
+								isPublic: {
+									type: "boolean",
+									label: i18n.ts.public,
+									default: clip.value.isPublic,
+								},
 							},
-							description: {
-								type: "string",
-								required: false,
-								multiline: true,
-								label: i18n.ts.description,
-								default: clip.description,
-							},
-							isPublic: {
-								type: "boolean",
-								label: i18n.ts.public,
-								default: clip.isPublic,
-							},
-						});
+						);
 						if (canceled) return;
 
 						os.apiWithDialog("clips/update", {
-							clipId: clip.id,
+							clipId: clip.value.id,
 							...result,
 						});
 					},
@@ -108,12 +111,14 @@ const headerActions = $computed(() =>
 					handler: async (): Promise<void> => {
 						const { canceled } = await os.confirm({
 							type: "warning",
-							text: i18n.t("deleteAreYouSure", { x: clip.name }),
+							text: i18n.t("deleteAreYouSure", {
+								x: clip.value.name,
+							}),
 						});
 						if (canceled) return;
 
 						await os.apiWithDialog("clips/delete", {
-							clipId: clip.id,
+							clipId: clip.value.id,
 						});
 					},
 				},
@@ -123,9 +128,9 @@ const headerActions = $computed(() =>
 
 definePageMetadata(
 	computed(() =>
-		clip
+		clip.value
 			? {
-					title: clip.name,
+					title: clip.value.name,
 					icon: "ph-paperclip ph-bold ph-lg",
 			  }
 			: null,
diff --git a/packages/client/src/pages/drive.vue b/packages/client/src/pages/drive.vue
index 2b4bf2d1fd..1b3a1b965c 100644
--- a/packages/client/src/pages/drive.vue
+++ b/packages/client/src/pages/drive.vue
@@ -5,21 +5,21 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import XDrive from "@/components/MkDrive.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-let folder = $ref(null);
+let folder = ref(null);
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata(
 	computed(() => ({
-		title: folder ? folder.name : i18n.ts.drive,
+		title: folder.value ? folder.value.name : i18n.ts.drive,
 		icon: "ph-cloud ph-bold ph-lg",
 		hideHeader: true,
 	})),
diff --git a/packages/client/src/pages/explore.featured.vue b/packages/client/src/pages/explore.featured.vue
index ae502659da..23cccc7552 100644
--- a/packages/client/src/pages/explore.featured.vue
+++ b/packages/client/src/pages/explore.featured.vue
@@ -13,6 +13,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import XNotes from "@/components/MkNotes.vue";
 import MkTab from "@/components/MkTab.vue";
 import { i18n } from "@/i18n";
@@ -43,5 +45,5 @@ const paginationForRemote = {
 // 	offsetMode: true,
 // };
 
-let tab = $ref("local");
+let tab = ref("local");
 </script>
diff --git a/packages/client/src/pages/explore.users.vue b/packages/client/src/pages/explore.users.vue
index 265e00e7f2..07403a2ba9 100644
--- a/packages/client/src/pages/explore.users.vue
+++ b/packages/client/src/pages/explore.users.vue
@@ -141,7 +141,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from "vue";
+import { computed, watch, ref } from "vue";
 import XUserList from "@/components/MkUserList.vue";
 import MkFolder from "@/components/MkFolder.vue";
 import MkTab from "@/components/MkTab.vue";
@@ -155,19 +155,19 @@ const props = defineProps<{
 	tag?: string;
 }>();
 
-let origin = $ref("local");
-let tagsEl = $ref<InstanceType<typeof MkFolder>>();
-let tagsLocal = $ref([]);
-let tagsRemote = $ref([]);
+let origin = ref("local");
+let tagsEl = ref<InstanceType<typeof MkFolder>>();
+let tagsLocal = ref([]);
+let tagsRemote = ref([]);
 
 watch(
 	() => props.tag,
 	() => {
-		if (tagsEl) tagsEl.toggleContent(props.tag == null);
+		if (tagsEl.value) tagsEl.value.toggleContent(props.tag == null);
 	},
 );
 
-const tagUsers = $computed(() => ({
+const tagUsers = computed(() => ({
 	endpoint: "hashtags/users" as const,
 	limit: 30,
 	params: {
@@ -241,14 +241,14 @@ os.api("hashtags/list", {
 	attachedToLocalUserOnly: true,
 	limit: 30,
 }).then((tags) => {
-	tagsLocal = tags;
+	tagsLocal.value = tags;
 });
 os.api("hashtags/list", {
 	sort: "+attachedRemoteUsers",
 	attachedToRemoteUserOnly: true,
 	limit: 30,
 }).then((tags) => {
-	tagsRemote = tags;
+	tagsRemote.value = tags;
 });
 </script>
 
diff --git a/packages/client/src/pages/explore.vue b/packages/client/src/pages/explore.vue
index c5b638ba4c..d68dd5d6ab 100644
--- a/packages/client/src/pages/explore.vue
+++ b/packages/client/src/pages/explore.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, onMounted } from "vue";
+import { computed, watch, onMounted, ref } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import XFeatured from "./explore.featured.vue";
@@ -50,12 +50,12 @@ import "swiper/scss";
 import "swiper/scss/virtual";
 
 const tabs = ["users", "featured"];
-let tab = $ref(tabs[0]);
-watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
+let tab = ref(tabs[0]);
+watch(tab, () => syncSlide(tabs.indexOf(tab.value)));
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => [
+const headerTabs = computed(() => [
 	{
 		key: "users",
 		icon: "ph-users ph-bold ph-lg",
@@ -79,11 +79,11 @@ let swiperRef = null;
 
 function setSwiperRef(swiper) {
 	swiperRef = swiper;
-	syncSlide(tabs.indexOf(tab));
+	syncSlide(tabs.indexOf(tab.value));
 }
 
 function onSlideChange() {
-	tab = tabs[swiperRef.activeIndex];
+	tab.value = tabs[swiperRef.activeIndex];
 }
 
 function syncSlide(index) {
diff --git a/packages/client/src/pages/follow-requests.vue b/packages/client/src/pages/follow-requests.vue
index d6afcf4565..dd323f7b0f 100644
--- a/packages/client/src/pages/follow-requests.vue
+++ b/packages/client/src/pages/follow-requests.vue
@@ -109,9 +109,9 @@ function reject(user) {
 	});
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata(
 	computed(() => ({
diff --git a/packages/client/src/pages/gallery/edit.vue b/packages/client/src/pages/gallery/edit.vue
index 72da912eaf..39a308cebe 100644
--- a/packages/client/src/pages/gallery/edit.vue
+++ b/packages/client/src/pages/gallery/edit.vue
@@ -63,7 +63,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, inject, watch } from "vue";
+import { computed, inject, watch, ref } from "vue";
 import FormButton from "@/components/MkButton.vue";
 import FormInput from "@/components/form/input.vue";
 import FormTextarea from "@/components/form/textarea.vue";
@@ -81,38 +81,38 @@ const props = defineProps<{
 	postId?: string;
 }>();
 
-let init = $ref(null);
-let files = $ref([]);
-let description = $ref(null);
-let title = $ref(null);
-let isSensitive = $ref(false);
+let init = ref(null);
+let files = ref([]);
+let description = ref(null);
+let title = ref(null);
+let isSensitive = ref(false);
 
 function selectFile(evt) {
 	selectFiles(evt.currentTarget ?? evt.target, null).then((selected) => {
-		files = files.concat(selected);
+		files.value = files.value.concat(selected);
 	});
 }
 
 function remove(file) {
-	files = files.filter((f) => f.id !== file.id);
+	files.value = files.value.filter((f) => f.id !== file.id);
 }
 
 async function save() {
 	if (props.postId) {
 		await os.apiWithDialog("gallery/posts/update", {
 			postId: props.postId,
-			title: title,
-			description: description,
-			fileIds: files.map((file) => file.id),
-			isSensitive: isSensitive,
+			title: title.value,
+			description: description.value,
+			fileIds: files.value.map((file) => file.id),
+			isSensitive: isSensitive.value,
 		});
 		router.push(`/gallery/${props.postId}`);
 	} else {
 		const created = await os.apiWithDialog("gallery/posts/create", {
-			title: title,
-			description: description,
-			fileIds: files.map((file) => file.id),
-			isSensitive: isSensitive,
+			title: title.value,
+			description: description.value,
+			fileIds: files.value.map((file) => file.id),
+			isSensitive: isSensitive.value,
 		});
 		router.push(`/gallery/${created.id}`);
 	}
@@ -133,26 +133,26 @@ async function del() {
 watch(
 	() => props.postId,
 	() => {
-		init = () =>
+		init.value = () =>
 			props.postId
 				? os
 						.api("gallery/posts/show", {
 							postId: props.postId,
 						})
 						.then((post) => {
-							files = post.files;
-							title = post.title;
-							description = post.description;
-							isSensitive = post.isSensitive;
+							files.value = post.files;
+							title.value = post.title;
+							description.value = post.description;
+							isSensitive.value = post.isSensitive;
 						})
 				: Promise.resolve(null);
 	},
 	{ immediate: true },
 );
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata(
 	computed(() =>
diff --git a/packages/client/src/pages/gallery/index.vue b/packages/client/src/pages/gallery/index.vue
index 45e7bd7ae6..4cee4f953c 100644
--- a/packages/client/src/pages/gallery/index.vue
+++ b/packages/client/src/pages/gallery/index.vue
@@ -106,7 +106,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineComponent, watch, onMounted } from "vue";
+import { computed, defineComponent, watch, onMounted, ref } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import MkFolder from "@/components/MkFolder.vue";
@@ -127,10 +127,10 @@ const props = defineProps<{
 }>();
 
 const tabs = ["explore", "liked", "my"];
-let tab = $ref(tabs[0]);
-watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
+let tab = ref(tabs[0]);
+watch(tab, () => syncSlide(tabs.indexOf(tab.value)));
 
-let tagsRef = $ref();
+let tagsRef = ref();
 
 const recentPostsPagination = {
 	endpoint: "gallery/posts" as const,
@@ -152,11 +152,11 @@ const likedPostsPagination = {
 watch(
 	() => props.tag,
 	() => {
-		if (tagsRef) tagsRef.tags.toggleContent(props.tag == null);
+		if (tagsRef.value) tagsRef.value.tags.toggleContent(props.tag == null);
 	},
 );
 
-const headerActions = $computed(() => [
+const headerActions = computed(() => [
 	{
 		icon: "ph-plus ph-bold ph-lg",
 		text: i18n.ts.create,
@@ -166,7 +166,7 @@ const headerActions = $computed(() => [
 	},
 ]);
 
-const headerTabs = $computed(() => [
+const headerTabs = computed(() => [
 	{
 		key: "explore",
 		title: i18n.ts.gallery,
@@ -193,11 +193,11 @@ let swiperRef = null;
 
 function setSwiperRef(swiper) {
 	swiperRef = swiper;
-	syncSlide(tabs.indexOf(tab));
+	syncSlide(tabs.indexOf(tab.value));
 }
 
 function onSlideChange() {
-	tab = tabs[swiperRef.activeIndex];
+	tab.value = tabs[swiperRef.activeIndex];
 }
 
 function syncSlide(index) {
diff --git a/packages/client/src/pages/gallery/post.vue b/packages/client/src/pages/gallery/post.vue
index aa55cc15bf..98a544f607 100644
--- a/packages/client/src/pages/gallery/post.vue
+++ b/packages/client/src/pages/gallery/post.vue
@@ -145,7 +145,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineComponent, inject, watch } from "vue";
+import { computed, defineComponent, inject, watch, ref } from "vue";
 import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import MkContainer from "@/components/MkContainer.vue";
@@ -164,40 +164,40 @@ const props = defineProps<{
 	postId: string;
 }>();
 
-let post = $ref(null);
-let error = $ref(null);
+let post = ref(null);
+let error = ref(null);
 const otherPostsPagination = {
 	endpoint: "users/gallery/posts" as const,
 	limit: 6,
 	params: computed(() => ({
-		userId: post.user.id,
+		userId: post.value.user.id,
 	})),
 };
 
 function fetchPost() {
-	post = null;
+	post.value = null;
 	os.api("gallery/posts/show", {
 		postId: props.postId,
 	})
 		.then((_post) => {
-			post = _post;
+			post.value = _post;
 		})
 		.catch((_error) => {
-			error = _error;
+			error.value = _error;
 		});
 }
 
 function share() {
 	navigator.share({
-		title: post.title,
-		text: post.description,
-		url: `${url}/gallery/${post.id}`,
+		title: post.value.title,
+		text: post.value.description,
+		url: `${url}/gallery/${post.value.id}`,
 	});
 }
 
 function shareWithNote() {
 	os.post({
-		initialText: `${post.title} ${url}/gallery/${post.id}`,
+		initialText: `${post.value.title} ${url}/gallery/${post.value.id}`,
 	});
 }
 
@@ -205,8 +205,8 @@ function like() {
 	os.api("gallery/posts/like", {
 		postId: props.postId,
 	}).then(() => {
-		post.isLiked = true;
-		post.likedCount++;
+		post.value.isLiked = true;
+		post.value.likedCount++;
 	});
 }
 
@@ -214,18 +214,18 @@ async function unlike() {
 	os.api("gallery/posts/unlike", {
 		postId: props.postId,
 	}).then(() => {
-		post.isLiked = false;
-		post.likedCount--;
+		post.value.isLiked = false;
+		post.value.likedCount--;
 	});
 }
 
 function edit() {
-	router.push(`/gallery/${post.id}/edit`);
+	router.push(`/gallery/${post.value.id}/edit`);
 }
 
 watch(() => props.postId, fetchPost, { immediate: true });
 
-const headerActions = $computed(() => [
+const headerActions = computed(() => [
 	{
 		icon: "ph-pencil ph-bold ph-lg",
 		text: i18n.ts.edit,
@@ -233,14 +233,14 @@ const headerActions = $computed(() => [
 	},
 ]);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata(
 	computed(() =>
-		post
+		post.value
 			? {
-					title: post.title,
-					avatar: post.user,
+					title: post.value.title,
+					avatar: post.value.user,
 			  }
 			: null,
 	),
diff --git a/packages/client/src/pages/instance-info.vue b/packages/client/src/pages/instance-info.vue
index 2b696bfb25..6cac8b4e8c 100644
--- a/packages/client/src/pages/instance-info.vue
+++ b/packages/client/src/pages/instance-info.vue
@@ -337,7 +337,7 @@
 </template>
 
 <script lang="ts" setup>
-import { watch } from "vue";
+import { watch, ref, computed } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import type * as firefish from "firefish-js";
@@ -378,16 +378,16 @@ const props = defineProps<{
 
 let tabs = ["overview"];
 if (iAmAdmin) tabs.push("chart", "users", "raw");
-let tab = $ref(tabs[0]);
-watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
+let tab = ref(tabs[0]);
+watch(tab, () => syncSlide(tabs.indexOf(tab.value)));
 
-let chartSrc = $ref("instance-requests");
-let meta = $ref<AugmentedInstanceMetadata | null>(null);
-let instance = $ref<AugmentedInstance | null>(null);
-let suspended = $ref(false);
-let isBlocked = $ref(false);
-let isSilenced = $ref(false);
-let faviconUrl = $ref(null);
+let chartSrc = ref("instance-requests");
+let meta = ref<AugmentedInstanceMetadata | null>(null);
+let instance = ref<AugmentedInstance | null>(null);
+let suspended = ref(false);
+let isBlocked = ref(false);
+let isSilenced = ref(false);
+let faviconUrl = ref(null);
 
 const usersPagination = {
 	endpoint: iAmAdmin ? "admin/show-users" : ("users" as const),
@@ -402,28 +402,30 @@ const usersPagination = {
 
 async function fetch() {
 	if (iAmAdmin)
-		meta = (await os.api("admin/meta")) as AugmentedInstanceMetadata;
-	instance = (await os.api("federation/show-instance", {
+		meta.value = (await os.api("admin/meta")) as AugmentedInstanceMetadata;
+	instance.value = (await os.api("federation/show-instance", {
 		host: props.host,
 	})) as AugmentedInstance;
-	suspended = instance.isSuspended;
-	isBlocked = instance.isBlocked;
-	isSilenced = instance.isSilenced;
-	faviconUrl =
-		getProxiedImageUrlNullable(instance.faviconUrl, "preview") ??
-		getProxiedImageUrlNullable(instance.iconUrl, "preview");
+	suspended.value = instance.value.isSuspended;
+	isBlocked.value = instance.value.isBlocked;
+	isSilenced.value = instance.value.isSilenced;
+	faviconUrl.value =
+		getProxiedImageUrlNullable(instance.value.faviconUrl, "preview") ??
+		getProxiedImageUrlNullable(instance.value.iconUrl, "preview");
 }
 
 async function toggleBlock() {
-	if (meta == null) return;
-	if (!instance) {
+	if (meta.value == null) return;
+	if (!instance.value) {
 		throw new Error(`Instance info not loaded`);
 	}
 	let blockedHosts: string[];
-	if (isBlocked) {
-		blockedHosts = meta.blockedHosts.concat([instance.host]);
+	if (isBlocked.value) {
+		blockedHosts = meta.value.blockedHosts.concat([instance.value.host]);
 	} else {
-		blockedHosts = meta.blockedHosts.filter((x) => x !== instance!.host);
+		blockedHosts = meta.value.blockedHosts.filter(
+			(x) => x !== instance.value!.host,
+		);
 	}
 	await os.api("admin/update-meta", {
 		blockedHosts,
@@ -431,15 +433,17 @@ async function toggleBlock() {
 }
 
 async function toggleSilence() {
-	if (meta == null) return;
-	if (!instance) {
+	if (meta.value == null) return;
+	if (!instance.value) {
 		throw new Error(`Instance info not loaded`);
 	}
 	let silencedHosts: string[];
-	if (isSilenced) {
-		silencedHosts = meta.silencedHosts.concat([instance.host]);
+	if (isSilenced.value) {
+		silencedHosts = meta.value.silencedHosts.concat([instance.value.host]);
 	} else {
-		silencedHosts = meta.silencedHosts.filter((x) => x !== instance!.host);
+		silencedHosts = meta.value.silencedHosts.filter(
+			(x) => x !== instance.value!.host,
+		);
 	}
 	await os.api("admin/update-meta", {
 		silencedHosts,
@@ -448,14 +452,14 @@ async function toggleSilence() {
 
 async function toggleSuspend(v) {
 	await os.api("admin/federation/update-instance", {
-		host: instance.host,
-		isSuspended: suspended,
+		host: instance.value.host,
+		isSuspended: suspended.value,
 	});
 }
 
 function refreshMetadata() {
 	os.api("admin/federation/refresh-remote-instance-metadata", {
-		host: instance.host,
+		host: instance.value.host,
 	});
 	os.alert({
 		text: "Refresh requested",
@@ -464,7 +468,7 @@ function refreshMetadata() {
 
 fetch();
 
-const headerActions = $computed(() => [
+const headerActions = computed(() => [
 	{
 		text: `https://${props.host}`,
 		icon: "ph-arrow-square-out ph-bold ph-lg",
@@ -502,7 +506,7 @@ if (iAmAdmin) {
 	);
 }
 
-let headerTabs = $computed(() => theTabs);
+let headerTabs = computed(() => theTabs);
 
 definePageMetadata({
 	title: props.host,
@@ -513,11 +517,11 @@ let swiperRef = null;
 
 function setSwiperRef(swiper) {
 	swiperRef = swiper;
-	syncSlide(tabs.indexOf(tab));
+	syncSlide(tabs.indexOf(tab.value));
 }
 
 function onSlideChange() {
-	tab = tabs[swiperRef.activeIndex];
+	tab.value = tabs[swiperRef.activeIndex];
 }
 
 function syncSlide(index) {
diff --git a/packages/client/src/pages/messaging/index.vue b/packages/client/src/pages/messaging/index.vue
index 111bf537c5..48e34a1be9 100644
--- a/packages/client/src/pages/messaging/index.vue
+++ b/packages/client/src/pages/messaging/index.vue
@@ -88,7 +88,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, markRaw, onMounted, onUnmounted, watch } from "vue";
+import { ref, markRaw, onMounted, onUnmounted, watch, computed } from "vue";
 import * as Acct from "firefish-js/built/acct";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
@@ -108,12 +108,12 @@ import "swiper/scss/virtual";
 
 const router = useRouter();
 
-let messages = $ref([]);
-let connection = $ref(null);
+let messages = ref([]);
+let connection = ref(null);
 
 const tabs = ["dms", "groups"];
-let tab = $ref(tabs[0]);
-watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
+let tab = ref(tabs[0]);
+watch(tab, () => syncSlide(tabs.indexOf(tab.value)));
 
 const MOBILE_THRESHOLD = 500;
 const isMobile = ref(
@@ -128,7 +128,7 @@ async function readAllMessagingMessages() {
 	await os.apiWithDialog("i/read-all-messaging-messages");
 }
 
-const headerActions = $computed(() => [
+const headerActions = computed(() => [
 	{
 		icon: "ph-check ph-bold ph-lg",
 		text: i18n.ts.markAllAsRead,
@@ -136,7 +136,7 @@ const headerActions = $computed(() => [
 	},
 ]);
 
-const headerTabs = $computed(() => [
+const headerTabs = computed(() => [
 	{
 		key: "dms",
 		title: i18n.ts._messaging.dms,
@@ -171,7 +171,7 @@ const groupsPagination = {
 
 function onMessage(message): void {
 	if (message.recipientId) {
-		messages = messages.filter(
+		messages.value = messages.value.filter(
 			(m) =>
 				!(
 					(m.recipientId === message.recipientId &&
@@ -181,16 +181,18 @@ function onMessage(message): void {
 				),
 		);
 
-		messages.unshift(message);
+		messages.value.unshift(message);
 	} else if (message.groupId) {
-		messages = messages.filter((m) => m.groupId !== message.groupId);
-		messages.unshift(message);
+		messages.value = messages.value.filter(
+			(m) => m.groupId !== message.groupId,
+		);
+		messages.value.unshift(message);
 	}
 }
 
 function onRead(ids): void {
 	for (const id of ids) {
-		const found = messages.find((m) => m.id === id);
+		const found = messages.value.find((m) => m.id === id);
 		if (found) {
 			if (found.recipientId) {
 				found.isRead = true;
@@ -255,11 +257,11 @@ let swiperRef = null;
 
 function setSwiperRef(swiper) {
 	swiperRef = swiper;
-	syncSlide(tabs.indexOf(tab));
+	syncSlide(tabs.indexOf(tab.value));
 }
 
 function onSlideChange() {
-	tab = tabs[swiperRef.activeIndex];
+	tab.value = tabs[swiperRef.activeIndex];
 }
 
 function syncSlide(index) {
@@ -269,10 +271,10 @@ function syncSlide(index) {
 onMounted(() => {
 	syncSlide(tabs.indexOf(swiperRef.activeIndex));
 
-	connection = markRaw(stream.useChannel("messagingIndex"));
+	connection.value = markRaw(stream.useChannel("messagingIndex"));
 
-	connection.on("message", onMessage);
-	connection.on("read", onRead);
+	connection.value.on("message", onMessage);
+	connection.value.on("read", onRead);
 
 	os.api("messaging/history", { group: false, limit: 5 }).then(
 		(userMessages) => {
@@ -284,7 +286,7 @@ onMounted(() => {
 							new Date(b.createdAt).getTime() -
 							new Date(a.createdAt).getTime(),
 					);
-					messages = _messages;
+					messages.value = _messages;
 				},
 			);
 		},
@@ -292,7 +294,7 @@ onMounted(() => {
 });
 
 onUnmounted(() => {
-	if (connection) connection.dispose();
+	if (connection.value) connection.value.dispose();
 });
 </script>
 
diff --git a/packages/client/src/pages/messaging/messaging-room.form.vue b/packages/client/src/pages/messaging/messaging-room.form.vue
index c87cdb0b11..0d318013ca 100644
--- a/packages/client/src/pages/messaging/messaging-room.form.vue
+++ b/packages/client/src/pages/messaging/messaging-room.form.vue
@@ -55,7 +55,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, watch } from "vue";
+import { onMounted, watch, ref, computed } from "vue";
 import * as Misskey from "firefish-js";
 import autosize from "autosize";
 //import insertTextAtCursor from 'insert-text-at-cursor';
@@ -74,12 +74,12 @@ const props = defineProps<{
 	group?: Misskey.entities.UserGroup | null;
 }>();
 
-let textEl = $ref<HTMLTextAreaElement>();
-let fileEl = $ref<HTMLInputElement>();
+let textEl = ref<HTMLTextAreaElement>();
+let fileEl = ref<HTMLInputElement>();
 
-let text = $ref<string>("");
-let file = $ref<Misskey.entities.DriveFile | null>(null);
-let sending = $ref(false);
+let text = ref<string>("");
+let file = ref<Misskey.entities.DriveFile | null>(null);
+let sending = ref(false);
 const typing = throttle(3000, () => {
 	stream.send(
 		"typingOnMessaging",
@@ -87,14 +87,15 @@ const typing = throttle(3000, () => {
 	);
 });
 
-let draftKey = $computed(() =>
+let draftKey = computed(() =>
 	props.user ? "user:" + props.user.id : "group:" + props.group?.id,
 );
-let canSend = $computed(
-	() => (text != null && text.trim() !== "") || file != null,
+let canSend = computed(
+	() =>
+		(text.value != null && text.value.trim() !== "") || file.value != null,
 );
 
-watch([$$(text), $$(file)], saveDraft);
+watch([text, file], saveDraft);
 
 async function onPaste(ev: ClipboardEvent) {
 	if (!ev.clipboardData) return;
@@ -157,7 +158,7 @@ function onDrop(ev: DragEvent): void {
 	//#region ドライブのファイル
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
 	if (driveFile != null && driveFile !== "") {
-		file = JSON.parse(driveFile);
+		file.value = JSON.parse(driveFile);
 		ev.preventDefault();
 	}
 	//#endregion
@@ -170,18 +171,18 @@ function onKeydown(ev: KeyboardEvent) {
 		defaultStore.state.enterSendsMessage;
 	if (sendOnEnter) {
 		if (ev.key === "Enter" && (ev.ctrlKey || ev.metaKey)) {
-			textEl.value += "\n";
+			textEl.value.value += "\n";
 		} else if (
 			ev.key === "Enter" &&
 			!ev.shiftKey &&
 			!("ontouchstart" in document.documentElement) &&
-			canSend
+			canSend.value
 		) {
 			ev.preventDefault();
 			send();
 		}
 	} else {
-		if (ev.key === "Enter" && (ev.ctrlKey || ev.metaKey) && canSend) {
+		if (ev.key === "Enter" && (ev.ctrlKey || ev.metaKey) && canSend.value) {
 			ev.preventDefault();
 			send();
 		}
@@ -195,30 +196,30 @@ function onCompositionUpdate() {
 function chooseFile(ev: MouseEvent) {
 	selectFile(ev.currentTarget ?? ev.target, i18n.ts.selectFile).then(
 		(selectedFile) => {
-			file = selectedFile;
+			file.value = selectedFile;
 		},
 	);
 }
 
 function onChangeFile() {
-	if (fileEl.files![0]) upload(fileEl.files[0]);
+	if (fileEl.value.files![0]) upload(fileEl.value.files[0]);
 }
 
 function upload(fileToUpload: File, name?: string) {
 	uploadFile(fileToUpload, defaultStore.state.uploadFolder, name).then(
 		(res) => {
-			file = res;
+			file.value = res;
 		},
 	);
 }
 
 function send() {
-	sending = true;
+	sending.value = true;
 	os.api("messaging/messages/create", {
 		userId: props.user ? props.user.id : undefined,
 		groupId: props.group ? props.group.id : undefined,
-		text: text ? text : undefined,
-		fileId: file ? file.id : undefined,
+		text: text.value ? text.value : undefined,
+		fileId: file.value ? file.value.id : undefined,
 	})
 		.then((message) => {
 			clear();
@@ -227,24 +228,24 @@ function send() {
 			console.error(err);
 		})
 		.then(() => {
-			sending = false;
+			sending.value = false;
 		});
 }
 
 function clear() {
-	text = "";
-	file = null;
+	text.value = "";
+	file.value = null;
 	deleteDraft();
 }
 
 function saveDraft() {
 	const drafts = JSON.parse(localStorage.getItem("message_drafts") || "{}");
 
-	drafts[draftKey] = {
+	drafts[draftKey.value] = {
 		updatedAt: new Date(),
 		data: {
-			text: text,
-			file: file,
+			text: text.value,
+			file: file.value,
 		},
 	};
 
@@ -254,33 +255,33 @@ function saveDraft() {
 function deleteDraft() {
 	const drafts = JSON.parse(localStorage.getItem("message_drafts") || "{}");
 
-	delete drafts[draftKey];
+	delete drafts[draftKey.value];
 
 	localStorage.setItem("message_drafts", JSON.stringify(drafts));
 }
 
 async function insertEmoji(ev: MouseEvent) {
-	os.openEmojiPicker(ev.currentTarget ?? ev.target, {}, textEl);
+	os.openEmojiPicker(ev.currentTarget ?? ev.target, {}, textEl.value);
 }
 
 onMounted(() => {
-	autosize(textEl);
+	autosize(textEl.value);
 
 	// TODO: detach when unmount
-	new Autocomplete(textEl, $$(text));
+	new Autocomplete(textEl.value, text);
 
 	// 書きかけの投稿を復元
 	const draft = JSON.parse(localStorage.getItem("message_drafts") || "{}")[
-		draftKey
+		draftKey.value
 	];
 	if (draft) {
-		text = draft.data.text;
-		file = draft.data.file;
+		text.value = draft.data.text;
+		file.value = draft.data.file;
 	}
 });
 
 defineExpose({
-	file,
+	file: file.value,
 	upload,
 });
 </script>
diff --git a/packages/client/src/pages/messaging/messaging-room.message.vue b/packages/client/src/pages/messaging/messaging-room.message.vue
index 872b8f5713..7c9a337da9 100644
--- a/packages/client/src/pages/messaging/messaging-room.message.vue
+++ b/packages/client/src/pages/messaging/messaging-room.message.vue
@@ -82,6 +82,8 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from "vue";
+
 import {} from "vue";
 import * as mfm from "mfm-js";
 import type * as Misskey from "firefish-js";
@@ -97,8 +99,8 @@ const props = defineProps<{
 	isGroup?: boolean;
 }>();
 
-const isMe = $computed(() => props.message.userId === $i?.id);
-const urls = $computed(() =>
+const isMe = computed(() => props.message.userId === $i?.id);
+const urls = computed(() =>
 	props.message.text ? extractUrlFromMfm(mfm.parse(props.message.text)) : [],
 );
 
diff --git a/packages/client/src/pages/messaging/messaging-room.vue b/packages/client/src/pages/messaging/messaging-room.vue
index 5c62d6f45e..95cbea6885 100644
--- a/packages/client/src/pages/messaging/messaging-room.vue
+++ b/packages/client/src/pages/messaging/messaging-room.vue
@@ -97,7 +97,14 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, onMounted, nextTick, onBeforeUnmount } from "vue";
+import {
+	computed,
+	watch,
+	onMounted,
+	nextTick,
+	onBeforeUnmount,
+	ref,
+} from "vue";
 import * as Misskey from "firefish-js";
 import * as Acct from "firefish-js/built/acct";
 import XMessage from "./messaging-room.message.vue";
@@ -122,73 +129,75 @@ const props = defineProps<{
 	groupId?: string;
 }>();
 
-let rootEl = $ref<HTMLDivElement>();
-let formEl = $ref<InstanceType<typeof XForm>>();
-let pagingComponent = $ref<InstanceType<typeof MkPagination>>();
+let rootEl = ref<HTMLDivElement>();
+let formEl = ref<InstanceType<typeof XForm>>();
+let pagingComponent = ref<InstanceType<typeof MkPagination>>();
 
-let fetching = $ref(true);
-let user: Misskey.entities.UserDetailed | null = $ref(null);
-let group: Misskey.entities.UserGroup | null = $ref(null);
-let typers: Misskey.entities.User[] = $ref([]);
+let fetching = ref(true);
+let user: Misskey.entities.UserDetailed | null = ref(null);
+let group: Misskey.entities.UserGroup | null = ref(null);
+let typers: Misskey.entities.User[] = ref([]);
 let connection: Misskey.ChannelConnection<
 	Misskey.Channels["messaging"]
-> | null = $ref(null);
-let showIndicator = $ref(false);
+> | null = ref(null);
+let showIndicator = ref(false);
 const { animation } = defaultStore.reactiveState;
 
-let pagination: Paging | null = $ref(null);
+let pagination: Paging | null = ref(null);
 
 watch([() => props.userAcct, () => props.groupId], () => {
-	if (connection) connection.dispose();
+	if (connection.value) connection.value.dispose();
 	fetch();
 });
 
 async function fetch() {
-	fetching = true;
+	fetching.value = true;
 
 	if (props.userAcct) {
 		const acct = Acct.parse(props.userAcct);
-		user = await os.api("users/show", {
+		user.value = await os.api("users/show", {
 			username: acct.username,
 			host: acct.host || undefined,
 		});
-		group = null;
+		group.value = null;
 
-		pagination = {
+		pagination.value = {
 			endpoint: "messaging/messages",
 			limit: 20,
 			params: {
-				userId: user.id,
+				userId: user.value.id,
 			},
 			reversed: true,
-			pageEl: $$(rootEl).value,
+			pageEl: rootEl.value,
 		};
-		connection = stream.useChannel("messaging", {
-			otherparty: user.id,
+		connection.value = stream.useChannel("messaging", {
+			otherparty: user.value.id,
 		});
 	} else {
-		user = null;
-		group = await os.api("users/groups/show", { groupId: props.groupId });
+		user.value = null;
+		group.value = await os.api("users/groups/show", {
+			groupId: props.groupId,
+		});
 
-		pagination = {
+		pagination.value = {
 			endpoint: "messaging/messages",
 			limit: 20,
 			params: {
-				groupId: group?.id,
+				groupId: group.value?.id,
 			},
 			reversed: true,
-			pageEl: $$(rootEl).value,
+			pageEl: rootEl.value,
 		};
-		connection = stream.useChannel("messaging", {
-			group: group?.id,
+		connection.value = stream.useChannel("messaging", {
+			group: group.value?.id,
 		});
 	}
 
-	connection.on("message", onMessage);
-	connection.on("read", onRead);
-	connection.on("deleted", onDeleted);
-	connection.on("typers", (_typers) => {
-		typers = _typers.filter((u) => u.id !== $i?.id);
+	connection.value.on("message", onMessage);
+	connection.value.on("read", onRead);
+	connection.value.on("deleted", onDeleted);
+	connection.value.on("typers", (_typers) => {
+		typers.value = _typers.filter((u) => u.id !== $i?.id);
 	});
 
 	document.addEventListener("visibilitychange", onVisibilitychange);
@@ -196,7 +205,7 @@ async function fetch() {
 	nextTick(() => {
 		// thisScrollToBottom();
 		window.setTimeout(() => {
-			fetching = false;
+			fetching.value = false;
 		}, 300);
 	});
 }
@@ -220,7 +229,7 @@ function onDrop(ev: DragEvent): void {
 
 	// ファイルだったら
 	if (ev.dataTransfer.files.length === 1) {
-		formEl.upload(ev.dataTransfer.files[0]);
+		formEl.value.upload(ev.dataTransfer.files[0]);
 		return;
 	} else if (ev.dataTransfer.files.length > 1) {
 		os.alert({
@@ -234,7 +243,7 @@ function onDrop(ev: DragEvent): void {
 	const driveFile = ev.dataTransfer.getData(_DATA_TRANSFER_DRIVE_FILE_);
 	if (driveFile != null && driveFile !== "") {
 		const file = JSON.parse(driveFile);
-		formEl.file = file;
+		formEl.value.file = file;
 	}
 	//#endregion
 }
@@ -242,11 +251,11 @@ function onDrop(ev: DragEvent): void {
 function onMessage(message) {
 	sound.play("chat");
 
-	const _isBottom = isBottomVisible(rootEl, 64);
+	const _isBottom = isBottomVisible(rootEl.value, 64);
 
-	pagingComponent.prepend(message);
+	pagingComponent.value.prepend(message);
 	if (message.userId !== $i?.id && !document.hidden) {
-		connection?.send("read", {
+		connection.value?.send("read", {
 			id: message.id,
 		});
 	}
@@ -263,28 +272,31 @@ function onMessage(message) {
 }
 
 function onRead(x) {
-	if (user) {
+	if (user.value) {
 		if (!Array.isArray(x)) x = [x];
 		for (const id of x) {
-			if (pagingComponent.items.some((y) => y.id === id)) {
-				const exist = pagingComponent.items
+			if (pagingComponent.value.items.some((y) => y.id === id)) {
+				const exist = pagingComponent.value.items
 					.map((y) => y.id)
 					.indexOf(id);
-				pagingComponent.items[exist] = {
-					...pagingComponent.items[exist],
+				pagingComponent.value.items[exist] = {
+					...pagingComponent.value.items[exist],
 					isRead: true,
 				};
 			}
 		}
-	} else if (group) {
+	} else if (group.value) {
 		for (const id of x.ids) {
-			if (pagingComponent.items.some((y) => y.id === id)) {
-				const exist = pagingComponent.items
+			if (pagingComponent.value.items.some((y) => y.id === id)) {
+				const exist = pagingComponent.value.items
 					.map((y) => y.id)
 					.indexOf(id);
-				pagingComponent.items[exist] = {
-					...pagingComponent.items[exist],
-					reads: [...pagingComponent.items[exist].reads, x.userId],
+				pagingComponent.value.items[exist] = {
+					...pagingComponent.value.items[exist],
+					reads: [
+						...pagingComponent.value.items[exist].reads,
+						x.userId,
+					],
 				};
 			}
 		}
@@ -292,9 +304,9 @@ function onRead(x) {
 }
 
 function onDeleted(id) {
-	const msg = pagingComponent.items.find((m) => m.id === id);
+	const msg = pagingComponent.value.items.find((m) => m.id === id);
 	if (msg) {
-		pagingComponent.items = pagingComponent.items.filter(
+		pagingComponent.value.items = pagingComponent.value.items.filter(
 			(m) => m.id !== msg.id,
 		);
 	}
@@ -302,31 +314,31 @@ function onDeleted(id) {
 
 function thisScrollToBottom() {
 	if (window.location.href.includes("my/messaging/")) {
-		scrollToBottom($$(rootEl).value, { behavior: "smooth" });
+		scrollToBottom(rootEl.value, { behavior: "smooth" });
 	}
 }
 
 function onIndicatorClick() {
-	showIndicator = false;
+	showIndicator.value = false;
 	thisScrollToBottom();
 }
 
-let scrollRemove: (() => void) | null = $ref(null);
+let scrollRemove: (() => void) | null = ref(null);
 
 function notifyNewMessage() {
-	showIndicator = true;
+	showIndicator.value = true;
 
-	scrollRemove = onScrollBottom(rootEl, () => {
-		showIndicator = false;
-		scrollRemove = null;
+	scrollRemove.value = onScrollBottom(rootEl.value, () => {
+		showIndicator.value = false;
+		scrollRemove.value = null;
 	});
 }
 
 function onVisibilitychange() {
 	if (document.hidden) return;
-	for (const message of pagingComponent.items) {
+	for (const message of pagingComponent.value.items) {
 		if (message.userId !== $i?.id && !message.isRead) {
-			connection?.send("read", {
+			connection.value?.send("read", {
 				id: message.id,
 			});
 		}
@@ -337,16 +349,16 @@ onMounted(() => {
 	fetch();
 	definePageMetadata(
 		computed(() => ({
-			title: group != null ? group.name : user?.name,
+			title: group.value != null ? group.value.name : user.value?.name,
 			icon: "ph-chats-teardrop-bold ph-lg",
 		})),
 	);
 });
 
 onBeforeUnmount(() => {
-	connection?.dispose();
+	connection.value?.dispose();
 	document.removeEventListener("visibilitychange", onVisibilitychange);
-	if (scrollRemove) scrollRemove();
+	if (scrollRemove.value) scrollRemove.value();
 });
 </script>
 
diff --git a/packages/client/src/pages/mfm-cheat-sheet.vue b/packages/client/src/pages/mfm-cheat-sheet.vue
index 6effc3f18a..54c6c60c25 100644
--- a/packages/client/src/pages/mfm-cheat-sheet.vue
+++ b/packages/client/src/pages/mfm-cheat-sheet.vue
@@ -443,7 +443,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineComponent } from "vue";
+import { defineComponent, ref } from "vue";
 import MkTextarea from "@/components/form/textarea.vue";
 import { definePageMetadata } from "@/scripts/page-metadata";
 import { i18n } from "@/i18n";
@@ -453,80 +453,80 @@ defineProps<{
 	popup?: boolean;
 }>();
 
-let preview_mention = $ref("@example");
-let preview_hashtag = $ref("#test");
-let preview_link = $ref(`[${i18n.ts._mfm.dummy}](https://joinfirefish.org)`);
-let preview_emoji = $ref(
+let preview_mention = ref("@example");
+let preview_hashtag = ref("#test");
+let preview_link = ref(`[${i18n.ts._mfm.dummy}](https://joinfirefish.org)`);
+let preview_emoji = ref(
 	instance.emojis.length ? `:${instance.emojis[0].name}:` : ":emojiname:",
 );
-let preview_bold = $ref(`**${i18n.ts._mfm.dummy}**`);
-let preview_small = $ref(
+let preview_bold = ref(`**${i18n.ts._mfm.dummy}**`);
+let preview_small = ref(
 	`<small>${i18n.ts._mfm.dummy}</small> $[small ${i18n.ts._mfm.dummy}]`,
 );
-let preview_center = $ref(
+let preview_center = ref(
 	`<center>${i18n.ts._mfm.dummy}</center> $[center ${i18n.ts._mfm.dummy}]`,
 );
-let preview_inlineCode = $ref('`<: "Hello, world!"`');
-let preview_blockCode = $ref(
+let preview_inlineCode = ref('`<: "Hello, world!"`');
+let preview_blockCode = ref(
 	'```\n~ (#i, 100) {\n\t<: ? ((i % 15) = 0) "FizzBuzz"\n\t\t.? ((i % 3) = 0) "Fizz"\n\t\t.? ((i % 5) = 0) "Buzz"\n\t\t. i\n}\n```',
 );
-let preview_inlineMath = $ref("\\(x= \\frac{-b' \\pm \\sqrt{(b')^2-ac}}{a}\\)");
-let preview_blockMath = $ref("\\[x= \\frac{-b' \\pm \\sqrt{(b')^2-ac}}{a}\\]");
-let preview_quote = $ref(`> ${i18n.ts._mfm.dummy}`);
-let preview_search = $ref(
+let preview_inlineMath = ref("\\(x= \\frac{-b' \\pm \\sqrt{(b')^2-ac}}{a}\\)");
+let preview_blockMath = ref("\\[x= \\frac{-b' \\pm \\sqrt{(b')^2-ac}}{a}\\]");
+let preview_quote = ref(`> ${i18n.ts._mfm.dummy}`);
+let preview_search = ref(
 	`${i18n.ts._mfm.dummy} [search]\n${i18n.ts._mfm.dummy} [検索]\n${i18n.ts._mfm.dummy} 検索`,
 );
-let preview_jelly = $ref(
+let preview_jelly = ref(
 	"$[jelly 🍮] $[jelly.speed=3s 🍮] $[jelly.delay=3s 🍮] $[jelly.loop=3 🍮]",
 );
-let preview_tada = $ref(
+let preview_tada = ref(
 	"$[tada 🍮] $[tada.speed=3s 🍮] $[tada.delay=3s 🍮] $[tada.loop=3 🍮]",
 );
-let preview_jump = $ref(
+let preview_jump = ref(
 	"$[jump 🍮] $[jump.speed=3s 🍮] $[jump.delay=3s 🍮] $[jump.loop=3 🍮]",
 );
-let preview_bounce = $ref(
+let preview_bounce = ref(
 	"$[bounce 🍮] $[bounce.speed=3s 🍮] $[bounce.delay=3s 🍮] $[bounce.loop=3 🍮]",
 );
-let preview_shake = $ref(
+let preview_shake = ref(
 	"$[shake 🍮] $[shake.speed=3s 🍮] $[shake.delay=3s 🍮] $[shake.loop=3 🍮]",
 );
-let preview_twitch = $ref(
+let preview_twitch = ref(
 	"$[twitch 🍮] $[twitch.speed=3s 🍮] $[twitch.delay=3s 🍮] $[twitch.loop=3 🍮]",
 );
-let preview_spin = $ref(
+let preview_spin = ref(
 	"$[spin 🍮] $[spin.left 🍮] $[spin.alternate 🍮]\n$[spin.x 🍮] $[spin.x,left 🍮] $[spin.x,alternate 🍮]\n$[spin.y 🍮] $[spin.y,left 🍮] $[spin.y,alternate 🍮]\n\n$[spin.speed=3s 🍮] $[spin.delay=3s 🍮] $[spin.loop=3 🍮]",
 );
-let preview_flip = $ref(
+let preview_flip = ref(
 	`$[flip ${i18n.ts._mfm.dummy}]\n$[flip.v ${i18n.ts._mfm.dummy}]\n$[flip.h,v ${i18n.ts._mfm.dummy}]`,
 );
-let preview_font = $ref(
+let preview_font = ref(
 	`$[font.serif ${i18n.ts._mfm.dummy}]\n$[font.monospace ${i18n.ts._mfm.dummy}]\n$[font.cursive ${i18n.ts._mfm.dummy}]\n$[font.fantasy ${i18n.ts._mfm.dummy}]`,
 );
-let preview_x2 = $ref("$[x2 🍮]");
-let preview_x3 = $ref("$[x3 🍮]");
-let preview_x4 = $ref("$[x4 🍮]");
-let preview_blur = $ref(`$[blur ${i18n.ts._mfm.dummy}]`);
-let preview_rainbow = $ref(
+let preview_x2 = ref("$[x2 🍮]");
+let preview_x3 = ref("$[x3 🍮]");
+let preview_x4 = ref("$[x4 🍮]");
+let preview_blur = ref(`$[blur ${i18n.ts._mfm.dummy}]`);
+let preview_rainbow = ref(
 	"$[rainbow 🍮] $[rainbow.speed=3s 🍮] $[rainbow.delay=3s 🍮] $[rainbow.loop=3 🍮]",
 );
-let preview_sparkle = $ref("$[sparkle 🍮]");
-let preview_rotate = $ref(
+let preview_sparkle = ref("$[sparkle 🍮]");
+let preview_rotate = ref(
 	"$[rotate 🍮]\n$[rotate.deg=45 🍮]\n$[rotate.x,deg=45 Hello, world!]",
 );
-let preview_position = $ref("$[position.y=-1 🍮]\n$[position.x=-1 🍮]");
-let preview_crop = $ref(
+let preview_position = ref("$[position.y=-1 🍮]\n$[position.x=-1 🍮]");
+let preview_crop = ref(
 	"$[crop.top=50 🍮] $[crop.right=50 🍮] $[crop.bottom=50 🍮] $[crop.left=50 🍮]",
 );
-let preview_scale = $ref(
+let preview_scale = ref(
 	"$[scale.x=1.3 🍮]\n$[scale.x=1.5,y=3 🍮]\n$[scale.y=0.3 🍮]",
 );
-let preview_fg = $ref("$[fg.color=eb6f92 Text color]");
-let preview_bg = $ref("$[bg.color=31748f Background color]");
-let preview_plain = $ref(
+let preview_fg = ref("$[fg.color=eb6f92 Text color]");
+let preview_bg = ref("$[bg.color=31748f Background color]");
+let preview_plain = ref(
 	"<plain>**bold** @mention #hashtag `code` $[x2 🍮]</plain>",
 );
-let preview_fade = $ref(
+let preview_fade = ref(
 	"$[fade 🍮] $[fade.out 🍮] $[fade.speed=3s 🍮] $[fade.delay=3s 🍮]",
 );
 
diff --git a/packages/client/src/pages/miauth.vue b/packages/client/src/pages/miauth.vue
index 7fedce0071..4e85d71b26 100644
--- a/packages/client/src/pages/miauth.vue
+++ b/packages/client/src/pages/miauth.vue
@@ -78,6 +78,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import {} from "vue";
 import MkSignin from "@/components/MkSignin.vue";
 import MkButton from "@/components/MkButton.vue";
@@ -96,14 +98,14 @@ const props = defineProps<{
 
 const _permissions = props.permission.split(",");
 
-let state = $ref<string | null>(null);
+let state = ref<string | null>(null);
 
 function getIcon(p: string) {
 	return p.includes("write") ? "pencil-simple" : "eye";
 }
 
 async function accept(): Promise<void> {
-	state = "waiting";
+	state.value = "waiting";
 	await os.api("miauth/gen-token", {
 		session: props.session,
 		name: props.name,
@@ -111,7 +113,7 @@ async function accept(): Promise<void> {
 		permission: _permissions,
 	});
 
-	state = "accepted";
+	state.value = "accepted";
 	if (props.callback) {
 		const cbUrl = new URL(props.callback);
 		if (
@@ -130,7 +132,7 @@ async function accept(): Promise<void> {
 }
 
 function deny(): void {
-	state = "denied";
+	state.value = "denied";
 }
 
 function onLogin(res): void {
diff --git a/packages/client/src/pages/my-antennas/create.vue b/packages/client/src/pages/my-antennas/create.vue
index 040a6b052d..250633dede 100644
--- a/packages/client/src/pages/my-antennas/create.vue
+++ b/packages/client/src/pages/my-antennas/create.vue
@@ -7,6 +7,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import XAntenna from "./editor.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
@@ -14,7 +16,7 @@ import { useRouter } from "@/router";
 
 const router = useRouter();
 
-let draft = $ref({
+let draft = ref({
 	name: "",
 	src: "all",
 	userListId: null,
diff --git a/packages/client/src/pages/my-antennas/edit.vue b/packages/client/src/pages/my-antennas/edit.vue
index 36254ff74b..3b64f3f7aa 100644
--- a/packages/client/src/pages/my-antennas/edit.vue
+++ b/packages/client/src/pages/my-antennas/edit.vue
@@ -9,7 +9,7 @@
 </template>
 
 <script lang="ts" setup>
-import { inject, watch } from "vue";
+import { inject, watch, ref, computed } from "vue";
 import XAntenna from "./editor.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
@@ -18,7 +18,7 @@ import { definePageMetadata } from "@/scripts/page-metadata";
 
 const router = useRouter();
 
-let antenna: any = $ref(null);
+let antenna: any = ref(null);
 
 const props = defineProps<{
 	antennaId: string;
@@ -30,13 +30,13 @@ function onAntennaUpdated() {
 
 os.api("antennas/show", { antennaId: props.antennaId }).then(
 	(antennaResponse) => {
-		antenna = antennaResponse;
+		antenna.value = antennaResponse;
 	},
 );
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.manageAntennas,
diff --git a/packages/client/src/pages/my-antennas/editor.vue b/packages/client/src/pages/my-antennas/editor.vue
index 0611fa10c1..a9e58807c3 100644
--- a/packages/client/src/pages/my-antennas/editor.vue
+++ b/packages/client/src/pages/my-antennas/editor.vue
@@ -114,7 +114,7 @@
 </template>
 
 <script lang="ts" setup>
-import { watch } from "vue";
+import { watch, ref } from "vue";
 import * as Acct from "firefish-js/built/acct";
 import MkButton from "@/components/MkButton.vue";
 import MkInput from "@/components/form/input.vue";
@@ -134,64 +134,64 @@ const emit = defineEmits<{
 	(ev: "deleted"): void;
 }>();
 
-let name: string = $ref(props.antenna.name);
-let src: string = $ref(props.antenna.src);
-let userListId: any = $ref(props.antenna.userListId);
-let userGroupId: any = $ref(props.antenna.userGroupId);
-let users: string = $ref(props.antenna.users.join("\n"));
-let instances: string = $ref(props.antenna.instances.join("\n"));
-let keywords: string = $ref(
+let name: string = ref(props.antenna.name);
+let src: string = ref(props.antenna.src);
+let userListId: any = ref(props.antenna.userListId);
+let userGroupId: any = ref(props.antenna.userGroupId);
+let users: string = ref(props.antenna.users.join("\n"));
+let instances: string = ref(props.antenna.instances.join("\n"));
+let keywords: string = ref(
 	props.antenna.keywords.map((x) => x.join(" ")).join("\n"),
 );
-let excludeKeywords: string = $ref(
+let excludeKeywords: string = ref(
 	props.antenna.excludeKeywords.map((x) => x.join(" ")).join("\n"),
 );
-let caseSensitive: boolean = $ref(props.antenna.caseSensitive);
-let withReplies: boolean = $ref(props.antenna.withReplies);
-let withFile: boolean = $ref(props.antenna.withFile);
-let notify: boolean = $ref(props.antenna.notify);
-let userLists: any = $ref(null);
-let userGroups: any = $ref(null);
+let caseSensitive: boolean = ref(props.antenna.caseSensitive);
+let withReplies: boolean = ref(props.antenna.withReplies);
+let withFile: boolean = ref(props.antenna.withFile);
+let notify: boolean = ref(props.antenna.notify);
+let userLists: any = ref(null);
+let userGroups: any = ref(null);
 
 watch(
-	() => src,
+	() => src.value,
 	async () => {
-		if (src === "list" && userLists === null) {
-			userLists = await os.api("users/lists/list");
+		if (src.value === "list" && userLists.value === null) {
+			userLists.value = await os.api("users/lists/list");
 		}
 
-		if (src === "group" && userGroups === null) {
+		if (src.value === "group" && userGroups.value === null) {
 			const groups1 = await os.api("users/groups/owned");
 			const groups2 = await os.api("users/groups/joined");
 
-			userGroups = [...groups1, ...groups2];
+			userGroups.value = [...groups1, ...groups2];
 		}
 	},
 );
 
 async function saveAntenna() {
 	const antennaData = {
-		name,
-		src,
-		userListId,
-		userGroupId,
-		withReplies,
-		withFile,
-		notify,
-		caseSensitive,
-		users: users
+		name: name.value,
+		src: src.value,
+		userListId: userListId.value,
+		userGroupId: userGroupId.value,
+		withReplies: withReplies.value,
+		withFile: withFile.value,
+		notify: notify.value,
+		caseSensitive: caseSensitive.value,
+		users: users.value
 			.trim()
 			.split("\n")
 			.map((x) => x.trim()),
-		instances: instances
+		instances: instances.value
 			.trim()
 			.split("\n")
 			.map((x) => x.trim()),
-		keywords: keywords
+		keywords: keywords.value
 			.trim()
 			.split("\n")
 			.map((x) => x.trim().split(" ")),
-		excludeKeywords: excludeKeywords
+		excludeKeywords: excludeKeywords.value
 			.trim()
 			.split("\n")
 			.map((x) => x.trim().split(" ")),
@@ -224,17 +224,17 @@ async function deleteAntenna() {
 
 function addUser() {
 	os.selectUser().then((user) => {
-		users = users.trim();
-		users += `\n@${Acct.toString(user as any)}`;
-		users = users.trim();
+		users.value = users.value.trim();
+		users.value += `\n@${Acct.toString(user as any)}`;
+		users.value = users.value.trim();
 	});
 }
 
 function addInstance() {
 	os.selectInstance().then((instance) => {
-		instances = instances.trim();
-		instances += "\n" + instance.host;
-		instances = instances.trim();
+		instances.value = instances.value.trim();
+		instances.value += "\n" + instance.host;
+		instances.value = instances.value.trim();
 	});
 }
 </script>
diff --git a/packages/client/src/pages/my-antennas/index.vue b/packages/client/src/pages/my-antennas/index.vue
index 259c6db695..3a722dcefb 100644
--- a/packages/client/src/pages/my-antennas/index.vue
+++ b/packages/client/src/pages/my-antennas/index.vue
@@ -55,7 +55,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onActivated, onDeactivated, ref } from "vue";
+import { onActivated, onDeactivated, ref, computed } from "vue";
 import MkPagination from "@/components/MkPagination.vue";
 import MkButton from "@/components/MkButton.vue";
 import MkInfo from "@/components/MkInfo.vue";
@@ -67,9 +67,9 @@ const pagination = {
 	limit: 250,
 };
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 const list = ref<typeof MkPagination | null>(null);
 
diff --git a/packages/client/src/pages/my-clips/index.vue b/packages/client/src/pages/my-clips/index.vue
index f88ee5a9bb..fdfaf509d1 100644
--- a/packages/client/src/pages/my-clips/index.vue
+++ b/packages/client/src/pages/my-clips/index.vue
@@ -38,6 +38,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, computed } from "vue";
+
 import {} from "vue";
 import MkPagination from "@/components/MkPagination.vue";
 import MkButton from "@/components/MkButton.vue";
@@ -51,7 +53,7 @@ const pagination = {
 	limit: 10,
 };
 
-const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
+const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 
 async function create() {
 	const { canceled, result } = await os.form(i18n.ts.createNewClip, {
@@ -75,20 +77,20 @@ async function create() {
 
 	os.apiWithDialog("clips/create", result);
 
-	pagingComponent.reload();
+	pagingComponent.value.reload();
 }
 
 function onClipCreated() {
-	pagingComponent.reload();
+	pagingComponent.value.reload();
 }
 
 function onClipDeleted() {
-	pagingComponent.reload();
+	pagingComponent.value.reload();
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.clip,
diff --git a/packages/client/src/pages/my-groups/group.vue b/packages/client/src/pages/my-groups/group.vue
index d77751e8d6..0868efcfff 100644
--- a/packages/client/src/pages/my-groups/group.vue
+++ b/packages/client/src/pages/my-groups/group.vue
@@ -139,7 +139,7 @@ definePageMetadata(
 	})),
 );
 
-const headerActions = $computed(() => [
+const headerActions = computed(() => [
 	{
 		icon: "ph-plus ph-bold ph-lg",
 		text: i18n.ts.invite,
diff --git a/packages/client/src/pages/my-groups/index.vue b/packages/client/src/pages/my-groups/index.vue
index d4cc6ab713..719d717cae 100644
--- a/packages/client/src/pages/my-groups/index.vue
+++ b/packages/client/src/pages/my-groups/index.vue
@@ -71,7 +71,7 @@ const joinedPagination = {
 	limit: 10,
 };
 
-const headerActions = $computed(() => [
+const headerActions = computed(() => [
 	{
 		icon: "ph-plus ph-bold ph-lg",
 		text: i18n.ts.createGroup,
diff --git a/packages/client/src/pages/my-lists/index.vue b/packages/client/src/pages/my-lists/index.vue
index cb3a74f57e..09b4469a6a 100644
--- a/packages/client/src/pages/my-lists/index.vue
+++ b/packages/client/src/pages/my-lists/index.vue
@@ -42,6 +42,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, computed } from "vue";
+
 import {} from "vue";
 import MkPagination from "@/components/MkPagination.vue";
 import MkButton from "@/components/MkButton.vue";
@@ -51,7 +53,7 @@ import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-const pagingComponent = $ref<InstanceType<typeof MkPagination>>();
+const pagingComponent = ref<InstanceType<typeof MkPagination>>();
 
 const pagination = {
 	endpoint: "users/lists/list" as const,
@@ -64,7 +66,7 @@ async function create() {
 	});
 	if (canceled) return;
 	await os.apiWithDialog("users/lists/create", { name: name });
-	pagingComponent.reload();
+	pagingComponent.value.reload();
 }
 
 async function deleteAll() {
@@ -78,9 +80,9 @@ async function deleteAll() {
 	os.success();
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.manageLists,
diff --git a/packages/client/src/pages/my-lists/list.vue b/packages/client/src/pages/my-lists/list.vue
index fe02c2ddd5..850e363dfb 100644
--- a/packages/client/src/pages/my-lists/list.vue
+++ b/packages/client/src/pages/my-lists/list.vue
@@ -66,7 +66,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from "vue";
+import { computed, watch, ref } from "vue";
 import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
 import { mainRouter } from "@/router";
@@ -77,18 +77,18 @@ const props = defineProps<{
 	listId: string;
 }>();
 
-let list = $ref(null);
-let users = $ref([]);
+let list = ref(null);
+let users = ref([]);
 
 function fetchList() {
 	os.api("users/lists/show", {
 		listId: props.listId,
 	}).then((_list) => {
-		list = _list;
+		list.value = _list;
 		os.api("users/show", {
-			userIds: list.userIds,
+			userIds: list.value.userIds,
 		}).then((_users) => {
-			users = _users;
+			users.value = _users;
 		});
 	});
 }
@@ -96,47 +96,47 @@ function fetchList() {
 function addUser() {
 	os.selectUser().then((user) => {
 		os.apiWithDialog("users/lists/push", {
-			listId: list.id,
+			listId: list.value.id,
 			userId: user.id,
 		}).then(() => {
-			users.push(user);
+			users.value.push(user);
 		});
 	});
 }
 
 function removeUser(user) {
 	os.api("users/lists/pull", {
-		listId: list.id,
+		listId: list.value.id,
 		userId: user.id,
 	}).then(() => {
-		users = users.filter((x) => x.id !== user.id);
+		users.value = users.value.filter((x) => x.id !== user.id);
 	});
 }
 
 async function renameList() {
 	const { canceled, result: name } = await os.inputText({
 		title: i18n.ts.enterListName,
-		default: list.name,
+		default: list.value.name,
 	});
 	if (canceled) return;
 
 	await os.api("users/lists/update", {
-		listId: list.id,
+		listId: list.value.id,
 		name: name,
 	});
 
-	list.name = name;
+	list.value.name = name;
 }
 
 async function deleteList() {
 	const { canceled } = await os.confirm({
 		type: "warning",
-		text: i18n.t("removeAreYouSure", { x: list.name }),
+		text: i18n.t("removeAreYouSure", { x: list.value.name }),
 	});
 	if (canceled) return;
 
 	await os.api("users/lists/delete", {
-		listId: list.id,
+		listId: list.value.id,
 	});
 	os.success();
 	mainRouter.push("/my/lists");
@@ -144,15 +144,15 @@ async function deleteList() {
 
 watch(() => props.listId, fetchList, { immediate: true });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata(
 	computed(() =>
-		list
+		list.value
 			? {
-					title: list.name,
+					title: list.value.name,
 					icon: "ph-list-bullets ph-bold ph-lg",
 			  }
 			: null,
diff --git a/packages/client/src/pages/not-found.vue b/packages/client/src/pages/not-found.vue
index d4ec84cff8..12d5545256 100644
--- a/packages/client/src/pages/not-found.vue
+++ b/packages/client/src/pages/not-found.vue
@@ -12,12 +12,14 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from "vue";
+
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.notFound,
diff --git a/packages/client/src/pages/note.vue b/packages/client/src/pages/note.vue
index 32ef04c132..005759586c 100644
--- a/packages/client/src/pages/note.vue
+++ b/packages/client/src/pages/note.vue
@@ -69,7 +69,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, defineComponent, watch } from "vue";
+import { computed, defineComponent, watch, ref } from "vue";
 import * as misskey from "firefish-js";
 import XNoteDetailed from "@/components/MkNoteDetailed.vue";
 import XNotes from "@/components/MkNotes.vue";
@@ -83,23 +83,23 @@ const props = defineProps<{
 	noteId: string;
 }>();
 
-let note = $ref<null | misskey.entities.Note>();
-let hasPrev = $ref(false);
-let hasNext = $ref(false);
-let showPrev = $ref(false);
-let showNext = $ref(false);
-let error = $ref();
-let isRenote = $ref(false);
-let appearNote = $ref<null | misskey.entities.Note>();
+let note = ref<null | misskey.entities.Note>();
+let hasPrev = ref(false);
+let hasNext = ref(false);
+let showPrev = ref(false);
+let showNext = ref(false);
+let error = ref();
+let isRenote = ref(false);
+let appearNote = ref<null | misskey.entities.Note>();
 
 const prevPagination = {
 	endpoint: "users/notes" as const,
 	limit: 10,
 	params: computed(() =>
-		appearNote
+		appearNote.value
 			? {
-					userId: appearNote.userId,
-					untilId: appearNote.id,
+					userId: appearNote.value.userId,
+					untilId: appearNote.value.id,
 			  }
 			: null,
 	),
@@ -110,53 +110,53 @@ const nextPagination = {
 	endpoint: "users/notes" as const,
 	limit: 10,
 	params: computed(() =>
-		appearNote
+		appearNote.value
 			? {
-					userId: appearNote.userId,
-					sinceId: appearNote.id,
+					userId: appearNote.value.userId,
+					sinceId: appearNote.value.id,
 			  }
 			: null,
 	),
 };
 
 function fetchNote() {
-	hasPrev = false;
-	hasNext = false;
-	showPrev = false;
-	showNext = false;
-	note = null;
+	hasPrev.value = false;
+	hasNext.value = false;
+	showPrev.value = false;
+	showNext.value = false;
+	note.value = null;
 	os.api("notes/show", {
 		noteId: props.noteId,
 	})
 		.then((res) => {
-			note = res;
-			isRenote =
-				note.renote != null &&
-				note.text == null &&
-				note.fileIds.length === 0 &&
-				note.poll == null;
-			appearNote = isRenote
-				? (note.renote as misskey.entities.Note)
-				: note;
+			note.value = res;
+			isRenote.value =
+				note.value.renote != null &&
+				note.value.text == null &&
+				note.value.fileIds.length === 0 &&
+				note.value.poll == null;
+			appearNote.value = isRenote.value
+				? (note.value.renote as misskey.entities.Note)
+				: note.value;
 
 			Promise.all([
 				os.api("users/notes", {
-					userId: note.userId,
-					untilId: note.id,
+					userId: note.value.userId,
+					untilId: note.value.id,
 					limit: 1,
 				}),
 				os.api("users/notes", {
-					userId: note.userId,
-					sinceId: note.id,
+					userId: note.value.userId,
+					sinceId: note.value.id,
 					limit: 1,
 				}),
 			]).then(([prev, next]) => {
-				hasPrev = prev.length !== 0;
-				hasNext = next.length !== 0;
+				hasPrev.value = prev.length !== 0;
+				hasNext.value = next.length !== 0;
 			});
 		})
 		.catch((err) => {
-			error = err;
+			error.value = err;
 		});
 }
 
@@ -164,27 +164,31 @@ watch(() => props.noteId, fetchNote, {
 	immediate: true,
 });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata(
 	computed(() =>
-		appearNote
+		appearNote.value
 			? {
 					title: i18n.t("noteOf", {
-						user: appearNote.user.name || appearNote.user.username,
+						user:
+							appearNote.value.user.name ||
+							appearNote.value.user.username,
 					}),
-					subtitle: new Date(appearNote.createdAt).toLocaleString(),
-					avatar: appearNote.user,
-					path: `/notes/${appearNote.id}`,
+					subtitle: new Date(
+						appearNote.value.createdAt,
+					).toLocaleString(),
+					avatar: appearNote.value.user,
+					path: `/notes/${appearNote.value.id}`,
 					share: {
 						title: i18n.t("noteOf", {
 							user:
-								appearNote.user.name ||
-								appearNote.user.username,
+								appearNote.value.user.name ||
+								appearNote.value.user.username,
 						}),
-						text: appearNote.text,
+						text: appearNote.value.text,
 					},
 			  }
 			: null,
diff --git a/packages/client/src/pages/notifications.vue b/packages/client/src/pages/notifications.vue
index fffcb2d13d..ed318f4b40 100644
--- a/packages/client/src/pages/notifications.vue
+++ b/packages/client/src/pages/notifications.vue
@@ -66,11 +66,11 @@ import "swiper/scss";
 import "swiper/scss/virtual";
 
 const tabs = ["all", "unread", "mentions", "directNotes"];
-let tab = $ref(tabs[0]);
-watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
+let tab = ref(tabs[0]);
+watch(tab, () => syncSlide(tabs.indexOf(tab.value)));
 
-let includeTypes = $ref<string[] | null>(null);
-let unreadOnly = $computed(() => tab === "unread");
+let includeTypes = ref<string[] | null>(null);
+let unreadOnly = computed(() => tab.value === "unread");
 os.api("notifications/mark-all-as-read");
 
 const MOBILE_THRESHOLD = 500;
@@ -98,19 +98,19 @@ const directNotesPagination = {
 function setFilter(ev) {
 	const typeItems = notificationTypes.map((t) => ({
 		text: i18n.t(`_notification._types.${t}`),
-		active: includeTypes && includeTypes.includes(t),
+		active: includeTypes.value && includeTypes.value.includes(t),
 		action: () => {
-			includeTypes = [t];
+			includeTypes.value = [t];
 		},
 	}));
 	const items =
-		includeTypes != null
+		includeTypes.value != null
 			? [
 					{
 						icon: "ph-x ph-bold ph-lg",
 						text: i18n.ts.clear,
 						action: () => {
-							includeTypes = null;
+							includeTypes.value = null;
 						},
 					},
 					null,
@@ -120,17 +120,17 @@ function setFilter(ev) {
 	os.popupMenu(items, ev.currentTarget ?? ev.target);
 }
 
-const headerActions = $computed(() =>
+const headerActions = computed(() =>
 	[
-		tab === "all"
+		tab.value === "all"
 			? {
 					text: i18n.ts.filter,
 					icon: "ph-funnel ph-bold ph-lg",
-					highlighted: includeTypes != null,
+					highlighted: includeTypes.value != null,
 					handler: setFilter,
 			  }
 			: undefined,
-		tab === "all"
+		tab.value === "all"
 			? {
 					text: i18n.ts.markAllAsRead,
 					icon: "ph-check ph-bold ph-lg",
@@ -142,7 +142,7 @@ const headerActions = $computed(() =>
 	].filter((x) => x !== undefined),
 );
 
-const headerTabs = $computed(() => [
+const headerTabs = computed(() => [
 	{
 		key: "all",
 		title: i18n.ts.all,
@@ -176,11 +176,11 @@ let swiperRef = null;
 
 function setSwiperRef(swiper) {
 	swiperRef = swiper;
-	syncSlide(tabs.indexOf(tab));
+	syncSlide(tabs.indexOf(tab.value));
 }
 
 function onSlideChange() {
-	tab = tabs[swiperRef.activeIndex];
+	tab.value = tabs[swiperRef.activeIndex];
 }
 
 function syncSlide(index) {
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
index 0f95c79a04..114f111b47 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.image.vue
@@ -23,7 +23,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import XContainer from "../page-editor.container.vue";
 import MkDriveFileThumbnail from "@/components/MkDriveFileThumbnail.vue";
 import * as os from "@/os";
@@ -40,11 +40,11 @@ const props = withDefaults(
 	},
 );
 
-let file: any = $ref(null);
+let file: any = ref(null);
 
 async function choose() {
 	os.selectDriveFile(false).then((fileResponse: any) => {
-		file = fileResponse;
+		file.value = fileResponse;
 		props.value.fileId = fileResponse.id;
 	});
 }
@@ -56,7 +56,7 @@ onMounted(async () => {
 		os.api("drive/files/show", {
 			fileId: props.value.fileId,
 		}).then((fileResponse) => {
-			file = fileResponse;
+			file.value = fileResponse;
 		});
 	}
 });
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
index a3c66a80c0..6b9a389fb4 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.note.vue
@@ -35,7 +35,7 @@
 </template>
 
 <script lang="ts" setup>
-import { watch } from "vue";
+import { watch, ref } from "vue";
 import XContainer from "../page-editor.container.vue";
 import MkInput from "@/components/form/input.vue";
 import MkSwitch from "@/components/form/switch.vue";
@@ -56,21 +56,26 @@ const props = withDefaults(
 	},
 );
 
-let id: any = $ref(props.value.note);
-let note: any = $ref(null);
+let id: any = ref(props.value.note);
+let note: any = ref(null);
 
 watch(
-	id,
+	id.value,
 	async () => {
-		if (id && (id.startsWith("http://") || id.startsWith("https://"))) {
-			props.value.note = (id.endsWith("/") ? id.slice(0, -1) : id)
+		if (
+			id.value &&
+			(id.value.startsWith("http://") || id.value.startsWith("https://"))
+		) {
+			props.value.note = (
+				id.value.endsWith("/") ? id.value.slice(0, -1) : id.value
+			)
 				.split("/")
 				.pop();
 		} else {
-			props.value.note = id;
+			props.value.note = id.value;
 		}
 
-		note = await os.api("notes/show", { noteId: props.value.note });
+		note.value = await os.api("notes/show", { noteId: props.value.note });
 	},
 	{
 		immediate: true,
diff --git a/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue b/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
index 63082b5ab7..e00e66e65a 100644
--- a/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
+++ b/packages/client/src/pages/page-editor/els/page-editor.el.radio-button.vue
@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts" setup>
-import { watch } from "vue";
+import { watch, ref } from "vue";
 import XContainer from "../page-editor.container.vue";
 import MkTextarea from "@/components/form/textarea.vue";
 import MkInput from "@/components/form/input.vue";
@@ -52,12 +52,12 @@ const props = withDefaults(
 	},
 );
 
-let values: string = $ref(props.value.values.join("\n"));
+let values: string = ref(props.value.values.join("\n"));
 
 watch(
-	values,
+	values.value,
 	() => {
-		props.value.values = values.split("\n");
+		props.value.values = values.value.split("\n");
 	},
 	{
 		deep: true,
diff --git a/packages/client/src/pages/page-editor/page-editor.vue b/packages/client/src/pages/page-editor/page-editor.vue
index 7fda393039..d4e9f379cf 100644
--- a/packages/client/src/pages/page-editor/page-editor.vue
+++ b/packages/client/src/pages/page-editor/page-editor.vue
@@ -160,7 +160,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, provide, watch } from "vue";
+import { defineAsyncComponent, computed, provide, watch, ref } from "vue";
 import { v4 as uuid } from "uuid";
 import XVariable from "./page-editor.script-block.vue";
 import XBlocks from "./page-editor.blocks.vue";
@@ -187,53 +187,53 @@ const props = defineProps<{
 	initUser?: string;
 }>();
 
-let tab = $ref("settings");
-let author = $ref($i);
-let readonly = $ref(false);
-let page = $ref(null);
-let pageId = $ref(null);
-let currentName = $ref(null);
-let title = $ref("");
-let summary = $ref(null);
-let name = $ref(Date.now().toString());
-let eyeCatchingImage = $ref(null);
-let eyeCatchingImageId = $ref(null);
-let font = $ref("sans-serif");
-let content = $ref([]);
-let alignCenter = $ref(false);
-let isPublic = $ref(true);
-let hideTitleWhenPinned = $ref(false);
-let variables = $ref([]);
-let hpml = $ref(null);
-let script = $ref("");
+let tab = ref("settings");
+let author = ref($i);
+let readonly = ref(false);
+let page = ref(null);
+let pageId = ref(null);
+let currentName = ref(null);
+let title = ref("");
+let summary = ref(null);
+let name = ref(Date.now().toString());
+let eyeCatchingImage = ref(null);
+let eyeCatchingImageId = ref(null);
+let font = ref("sans-serif");
+let content = ref([]);
+let alignCenter = ref(false);
+let isPublic = ref(true);
+let hideTitleWhenPinned = ref(false);
+let variables = ref([]);
+let hpml = ref(null);
+let script = ref("");
 
-provide("readonly", readonly);
+provide("readonly", readonly.value);
 provide("getScriptBlockList", getScriptBlockList);
 provide("getPageBlockList", getPageBlockList);
 
-watch($$(eyeCatchingImageId), async () => {
-	if (eyeCatchingImageId == null) {
-		eyeCatchingImage = null;
+watch(eyeCatchingImageId, async () => {
+	if (eyeCatchingImageId.value == null) {
+		eyeCatchingImage.value = null;
 	} else {
-		eyeCatchingImage = await os.api("drive/files/show", {
-			fileId: eyeCatchingImageId,
+		eyeCatchingImage.value = await os.api("drive/files/show", {
+			fileId: eyeCatchingImageId.value,
 		});
 	}
 });
 
 function getSaveOptions() {
 	return {
-		title: title.trim(),
-		name: name.trim(),
-		summary: summary,
-		font: font,
-		script: script,
-		hideTitleWhenPinned: hideTitleWhenPinned,
-		alignCenter: alignCenter,
-		isPublic: isPublic,
-		content: content,
-		variables: variables,
-		eyeCatchingImageId: eyeCatchingImageId,
+		title: title.value.trim(),
+		name: name.value.trim(),
+		summary: summary.value,
+		font: font.value,
+		script: script.value,
+		hideTitleWhenPinned: hideTitleWhenPinned.value,
+		alignCenter: alignCenter.value,
+		isPublic: isPublic.value,
+		content: content.value,
+		variables: variables.value,
+		eyeCatchingImageId: eyeCatchingImageId.value,
 	};
 }
 
@@ -257,11 +257,11 @@ function save() {
 		}
 	};
 
-	if (pageId) {
-		options.pageId = pageId;
+	if (pageId.value) {
+		options.pageId = pageId.value;
 		os.api("pages/update", options)
 			.then((page) => {
-				currentName = name.trim();
+				currentName.value = name.value.trim();
 				os.alert({
 					type: "success",
 					text: i18n.ts._pages.updated,
@@ -271,13 +271,13 @@ function save() {
 	} else {
 		os.api("pages/create", options)
 			.then((created) => {
-				pageId = created.id;
-				currentName = name.trim();
+				pageId.value = created.id;
+				currentName.value = name.value.trim();
 				os.alert({
 					type: "success",
 					text: i18n.ts._pages.created,
 				});
-				mainRouter.push(`/pages/edit/${pageId}`);
+				mainRouter.push(`/pages/edit/${pageId.value}`);
 			})
 			.catch(onError);
 	}
@@ -286,11 +286,11 @@ function save() {
 function del() {
 	os.confirm({
 		type: "warning",
-		text: i18n.t("removeAreYouSure", { x: title.trim() }),
+		text: i18n.t("removeAreYouSure", { x: title.value.trim() }),
 	}).then(({ canceled }) => {
 		if (canceled) return;
 		os.api("pages/delete", {
-			pageId: pageId,
+			pageId: pageId.value,
 		}).then(() => {
 			os.alert({
 				type: "success",
@@ -302,16 +302,16 @@ function del() {
 }
 
 function duplicate() {
-	title = title + " - copy";
-	name = name + "-copy";
+	title.value = title.value + " - copy";
+	name.value = name.value + "-copy";
 	os.api("pages/create", getSaveOptions()).then((created) => {
-		pageId = created.id;
-		currentName = name.trim();
+		pageId.value = created.id;
+		currentName.value = name.value.trim();
 		os.alert({
 			type: "success",
 			text: i18n.ts._pages.created,
 		});
-		mainRouter.push(`/pages/edit/${pageId}`);
+		mainRouter.push(`/pages/edit/${pageId.value}`);
 	});
 }
 
@@ -324,7 +324,7 @@ async function add() {
 	if (canceled) return;
 
 	const id = uuid();
-	content.push({ id, type });
+	content.value.push({ id, type });
 }
 
 async function addVariable() {
@@ -335,7 +335,7 @@ async function addVariable() {
 
 	name = name.trim();
 
-	if (hpml.isUsedName(name)) {
+	if (hpml.value.isUsedName(name)) {
 		os.alert({
 			type: "error",
 			text: i18n.ts._pages.variableNameIsAlreadyUsed,
@@ -344,11 +344,11 @@ async function addVariable() {
 	}
 
 	const id = uuid();
-	variables.push({ id, name, type: null });
+	variables.value.push({ id, name, type: null });
 }
 
 function removeVariable(v) {
-	variables = variables.filter((x) => x.name !== v.name);
+	variables.value = variables.value.filter((x) => x.name !== v.name);
 }
 
 function getPageBlockList() {
@@ -427,7 +427,7 @@ function getScriptBlockList(type: string = null) {
 		}
 	}
 
-	const userFns = variables.filter((x) => x.type === "fn");
+	const userFns = variables.value.filter((x) => x.type === "fn");
 	if (userFns.length > 0) {
 		list.unshift({
 			label: i18n.t("_pages.script.categories.fn"),
@@ -443,63 +443,63 @@ function getScriptBlockList(type: string = null) {
 
 function setEyeCatchingImage(img) {
 	selectFile(img.currentTarget ?? img.target, null).then((file) => {
-		eyeCatchingImageId = file.id;
+		eyeCatchingImageId.value = file.id;
 	});
 }
 
 function removeEyeCatchingImage() {
-	eyeCatchingImageId = null;
+	eyeCatchingImageId.value = null;
 }
 
 async function init() {
-	hpml = new HpmlTypeChecker();
+	hpml.value = new HpmlTypeChecker();
 
 	watch(
-		$$(variables),
+		variables,
 		() => {
-			hpml.variables = variables;
+			hpml.value.variables = variables.value;
 		},
 		{ deep: true },
 	);
 
 	watch(
-		$$(content),
+		content,
 		() => {
-			hpml.pageVars = collectPageVars(content);
+			hpml.value.pageVars = collectPageVars(content.value);
 		},
 		{ deep: true },
 	);
 
 	if (props.initPageId) {
-		page = await os.api("pages/show", {
+		page.value = await os.api("pages/show", {
 			pageId: props.initPageId,
 		});
 	} else if (props.initPageName && props.initUser) {
-		page = await os.api("pages/show", {
+		page.value = await os.api("pages/show", {
 			name: props.initPageName,
 			username: props.initUser,
 		});
-		readonly = true;
+		readonly.value = true;
 	}
 
-	if (page) {
-		author = page.user;
-		pageId = page.id;
-		title = page.title;
-		name = page.name;
-		currentName = page.name;
-		summary = page.summary;
-		font = page.font;
-		script = page.script;
-		hideTitleWhenPinned = page.hideTitleWhenPinned;
-		alignCenter = page.alignCenter;
-		isPublic = page.isPublic;
-		content = page.content;
-		variables = page.variables;
-		eyeCatchingImageId = page.eyeCatchingImageId;
+	if (page.value) {
+		author.value = page.value.user;
+		pageId.value = page.value.id;
+		title.value = page.value.title;
+		name.value = page.value.name;
+		currentName.value = page.value.name;
+		summary.value = page.value.summary;
+		font.value = page.value.font;
+		script.value = page.value.script;
+		hideTitleWhenPinned.value = page.value.hideTitleWhenPinned;
+		alignCenter.value = page.value.alignCenter;
+		isPublic.value = page.value.isPublic;
+		content.value = page.value.content;
+		variables.value = page.value.variables;
+		eyeCatchingImageId.value = page.value.eyeCatchingImageId;
 	} else {
 		const id = uuid();
-		content = [
+		content.value = [
 			{
 				id,
 				type: "text",
@@ -511,9 +511,9 @@ async function init() {
 
 init();
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => [
+const headerTabs = computed(() => [
 	{
 		key: "settings",
 		title: i18n.ts._pages.pageSetting,
diff --git a/packages/client/src/pages/page.vue b/packages/client/src/pages/page.vue
index 54f7018901..b89bed94d6 100644
--- a/packages/client/src/pages/page.vue
+++ b/packages/client/src/pages/page.vue
@@ -200,7 +200,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from "vue";
+import { computed, watch, ref } from "vue";
 import XPage from "@/components/page/page.vue";
 import MkButton from "@/components/MkButton.vue";
 import * as os from "@/os";
@@ -219,30 +219,30 @@ const props = defineProps<{
 	username: string;
 }>();
 
-let page = $ref(null);
-let bgImg = $ref(null);
-let error = $ref(null);
+let page = ref(null);
+let bgImg = ref(null);
+let error = ref(null);
 const otherPostsPagination = {
 	endpoint: "users/pages" as const,
 	limit: 6,
 	params: computed(() => ({
-		userId: page.user.id,
+		userId: page.value.user.id,
 	})),
 };
-const path = $computed(() => props.username + "/" + props.pageName);
+const path = computed(() => props.username + "/" + props.pageName);
 
 function fetchPage() {
-	page = null;
+	page.value = null;
 	os.api("pages/show", {
 		name: props.pageName,
 		username: props.username,
 	})
 		.then((_page) => {
-			page = _page;
-			bgImg = getBgImg();
+			page.value = _page;
+			bgImg.value = getBgImg();
 		})
 		.catch((err) => {
-			error = err;
+			error.value = err;
 		});
 }
 
@@ -252,8 +252,8 @@ function copyUrl() {
 }
 
 function getBgImg(): string {
-	if (page.eyeCatchingImage != null) {
-		return `url(${page.eyeCatchingImage.url})`;
+	if (page.value.eyeCatchingImage != null) {
+		return `url(${page.value.eyeCatchingImage.url})`;
 	} else {
 		return "linear-gradient(to bottom right, #31748f, #9ccfd8)";
 	}
@@ -261,60 +261,60 @@ function getBgImg(): string {
 
 function share() {
 	navigator.share({
-		title: page.title ?? page.name,
-		text: page.summary,
-		url: `${url}/@${page.user.username}/pages/${page.name}`,
+		title: page.value.title ?? page.value.name,
+		text: page.value.summary,
+		url: `${url}/@${page.value.user.username}/pages/${page.value.name}`,
 	});
 }
 
 function shareWithNote() {
 	os.post({
-		initialText: `${page.title || page.name} ${url}/@${
-			page.user.username
-		}/pages/${page.name}`,
+		initialText: `${page.value.title || page.value.name} ${url}/@${
+			page.value.user.username
+		}/pages/${page.value.name}`,
 	});
 }
 
 function like() {
 	os.api("pages/like", {
-		pageId: page.id,
+		pageId: page.value.id,
 	}).then(() => {
-		page.isLiked = true;
-		page.likedCount++;
+		page.value.isLiked = true;
+		page.value.likedCount++;
 	});
 }
 
 async function unlike() {
 	os.api("pages/unlike", {
-		pageId: page.id,
+		pageId: page.value.id,
 	}).then(() => {
-		page.isLiked = false;
-		page.likedCount--;
+		page.value.isLiked = false;
+		page.value.likedCount--;
 	});
 }
 
 function pin(pin) {
 	os.apiWithDialog("i/update", {
-		pinnedPageId: pin ? page.id : null,
+		pinnedPageId: pin ? page.value.id : null,
 	});
 }
 
-watch(() => path, fetchPage, { immediate: true });
+watch(() => path.value, fetchPage, { immediate: true });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata(
 	computed(() =>
-		page
+		page.value
 			? {
-					title: computed(() => page.title || page.name),
-					avatar: page.user,
-					path: `/@${page.user.username}/pages/${page.name}`,
+					title: computed(() => page.value.title || page.value.name),
+					avatar: page.value.user,
+					path: `/@${page.value.user.username}/pages/${page.value.name}`,
 					share: {
-						title: page.title || page.name,
-						text: page.summary,
+						title: page.value.title || page.value.name,
+						text: page.value.summary,
 					},
 			  }
 			: null,
diff --git a/packages/client/src/pages/pages.vue b/packages/client/src/pages/pages.vue
index 6b051f683f..50130bfa79 100644
--- a/packages/client/src/pages/pages.vue
+++ b/packages/client/src/pages/pages.vue
@@ -80,7 +80,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, onMounted } from "vue";
+import { computed, watch, onMounted, ref } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import MkPagePreview from "@/components/MkPagePreview.vue";
@@ -96,9 +96,9 @@ import "swiper/scss/virtual";
 
 const router = useRouter();
 
-let tab = $ref("featured");
+let tab = ref("featured");
 const tabs = ["featured", "liked", "my"];
-watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
+watch(tab, () => syncSlide(tabs.indexOf(tab.value)));
 
 const featuredPagesPagination = {
 	endpoint: "pages/featured" as const,
@@ -117,7 +117,7 @@ function create() {
 	router.push("/pages/new");
 }
 
-const headerActions = $computed(() => [
+const headerActions = computed(() => [
 	{
 		icon: "ph-plus ph-bold ph-lg",
 		text: i18n.ts.create,
@@ -125,7 +125,7 @@ const headerActions = $computed(() => [
 	},
 ]);
 
-const headerTabs = $computed(() => [
+const headerTabs = computed(() => [
 	{
 		key: "featured",
 		title: i18n.ts._pages.featured,
@@ -154,11 +154,11 @@ let swiperRef = null;
 
 function setSwiperRef(swiper) {
 	swiperRef = swiper;
-	syncSlide(tabs.indexOf(tab));
+	syncSlide(tabs.indexOf(tab.value));
 }
 
 function onSlideChange() {
-	tab = tabs[swiperRef.activeIndex];
+	tab.value = tabs[swiperRef.activeIndex];
 }
 
 function syncSlide(index) {
diff --git a/packages/client/src/pages/preview.vue b/packages/client/src/pages/preview.vue
index cfec4bd386..ec00cd8033 100644
--- a/packages/client/src/pages/preview.vue
+++ b/packages/client/src/pages/preview.vue
@@ -10,9 +10,9 @@ import MkSample from "@/components/MkSample.vue";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata(
 	computed(() => ({
diff --git a/packages/client/src/pages/registry.keys.vue b/packages/client/src/pages/registry.keys.vue
index bdc258489d..f4d706ee1a 100644
--- a/packages/client/src/pages/registry.keys.vue
+++ b/packages/client/src/pages/registry.keys.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import JSON5 from "json5";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
@@ -55,15 +55,17 @@ const props = defineProps<{
 	path: string;
 }>();
 
-const scope = $computed(() => props.path.split("/"));
+const scope = computed(() => props.path.split("/"));
 
-let keys = $ref(null);
+let keys = ref(null);
 
 function fetchKeys() {
 	os.api("i/registry/keys-with-type", {
-		scope: scope,
+		scope: scope.value,
 	}).then((res) => {
-		keys = Object.entries(res).sort((a, b) => a[0].localeCompare(b[0]));
+		keys.value = Object.entries(res).sort((a, b) =>
+			a[0].localeCompare(b[0]),
+		);
 	});
 }
 
@@ -81,7 +83,7 @@ async function createKey() {
 		scope: {
 			type: "string",
 			label: i18n.ts._registry.scope,
-			default: scope.join("/"),
+			default: scope.value.join("/"),
 		},
 	});
 	if (canceled) return;
@@ -96,9 +98,9 @@ async function createKey() {
 
 watch(() => props.path, fetchKeys, { immediate: true });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.registry,
diff --git a/packages/client/src/pages/registry.value.vue b/packages/client/src/pages/registry.value.vue
index b95061c7e5..c63a73e82d 100644
--- a/packages/client/src/pages/registry.value.vue
+++ b/packages/client/src/pages/registry.value.vue
@@ -54,7 +54,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import JSON5 from "json5";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
@@ -71,25 +71,25 @@ const props = defineProps<{
 	path: string;
 }>();
 
-const scope = $computed(() => props.path.split("/").slice(0, -1));
-const key = $computed(() => props.path.split("/").at(-1));
+const scope = computed(() => props.path.split("/").slice(0, -1));
+const key = computed(() => props.path.split("/").at(-1));
 
-let value = $ref(null);
-let valueForEditor = $ref(null);
+let value = ref(null);
+let valueForEditor = ref(null);
 
 function fetchValue() {
 	os.api("i/registry/get-detail", {
-		scope,
-		key,
+		scope: scope.value,
+		key: key.value,
 	}).then((res) => {
-		value = res;
-		valueForEditor = JSON5.stringify(res.value, null, "\t");
+		value.value = res;
+		valueForEditor.value = JSON5.stringify(res.value, null, "\t");
 	});
 }
 
 async function save() {
 	try {
-		JSON5.parse(valueForEditor);
+		JSON5.parse(valueForEditor.value);
 	} catch (err) {
 		os.alert({
 			type: "error",
@@ -103,9 +103,9 @@ async function save() {
 	}).then(({ canceled }) => {
 		if (canceled) return;
 		os.apiWithDialog("i/registry/set", {
-			scope,
-			key,
-			value: JSON5.parse(valueForEditor),
+			scope: scope.value,
+			key: key.value,
+			value: JSON5.parse(valueForEditor.value),
 		});
 	});
 }
@@ -117,17 +117,17 @@ function del() {
 	}).then(({ canceled }) => {
 		if (canceled) return;
 		os.apiWithDialog("i/registry/remove", {
-			scope,
-			key,
+			scope: scope.value,
+			key: key.value,
 		});
 	});
 }
 
 watch(() => props.path, fetchValue, { immediate: true });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.registry,
diff --git a/packages/client/src/pages/registry.vue b/packages/client/src/pages/registry.vue
index 7bb300c99d..1da5a56a7e 100644
--- a/packages/client/src/pages/registry.vue
+++ b/packages/client/src/pages/registry.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import JSON5 from "json5";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
@@ -33,11 +33,11 @@ import FormLink from "@/components/form/link.vue";
 import FormSection from "@/components/form/section.vue";
 import MkButton from "@/components/MkButton.vue";
 
-let scopes = $ref(null);
+let scopes = ref(null);
 
 function fetchScopes() {
 	os.api("i/registry/scopes").then((res) => {
-		scopes = res
+		scopes.value = res
 			.slice()
 			.sort((a, b) => a.join("/").localeCompare(b.join("/")));
 	});
@@ -71,9 +71,9 @@ async function createKey() {
 
 fetchScopes();
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.registry,
diff --git a/packages/client/src/pages/reset-password.vue b/packages/client/src/pages/reset-password.vue
index 395bf11f96..4c8de5cd70 100644
--- a/packages/client/src/pages/reset-password.vue
+++ b/packages/client/src/pages/reset-password.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, onMounted } from "vue";
+import { defineAsyncComponent, onMounted, ref, computed } from "vue";
 import FormInput from "@/components/form/input.vue";
 import FormButton from "@/components/MkButton.vue";
 import * as os from "@/os";
@@ -42,12 +42,12 @@ const props = defineProps<{
 	token?: string;
 }>();
 
-let password = $ref("");
+let password = ref("");
 
 async function save() {
 	await os.apiWithDialog("reset-password", {
 		token: props.token,
-		password: password,
+		password: password.value,
 	});
 	mainRouter.push("/");
 }
@@ -66,9 +66,9 @@ onMounted(() => {
 	}
 });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.resetPassword,
diff --git a/packages/client/src/pages/scratchpad.vue b/packages/client/src/pages/scratchpad.vue
index 77b4bf835d..91a43f1501 100644
--- a/packages/client/src/pages/scratchpad.vue
+++ b/packages/client/src/pages/scratchpad.vue
@@ -37,7 +37,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import "prismjs";
 import { highlight, languages } from "prismjs/components/prism-core";
 import "prismjs/components/prism-clike";
@@ -133,9 +133,9 @@ function highlighter(code) {
 	return highlight(code, languages.js, "javascript");
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.scratchpad,
diff --git a/packages/client/src/pages/search.vue b/packages/client/src/pages/search.vue
index 45ab40c706..de78c5f7cb 100644
--- a/packages/client/src/pages/search.vue
+++ b/packages/client/src/pages/search.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, onMounted } from "vue";
+import { computed, watch, onMounted, ref } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import XNotes from "@/components/MkNotes.vue";
@@ -76,12 +76,12 @@ const usersPagination = {
 };
 
 const tabs = ["notes", "users"];
-let tab = $ref(tabs[0]);
-watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
+let tab = ref(tabs[0]);
+watch(tab, () => syncSlide(tabs.indexOf(tab.value)));
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => [
+const headerTabs = computed(() => [
 	{
 		key: "notes",
 		icon: "ph-magnifying-glass ph-bold ph-lg",
@@ -98,11 +98,11 @@ let swiperRef = null;
 
 function setSwiperRef(swiper) {
 	swiperRef = swiper;
-	syncSlide(tabs.indexOf(tab));
+	syncSlide(tabs.indexOf(tab.value));
 }
 
 function onSlideChange() {
-	tab = tabs[swiperRef.activeIndex];
+	tab.value = tabs[swiperRef.activeIndex];
 }
 
 function syncSlide(index) {
diff --git a/packages/client/src/pages/settings/2fa.vue b/packages/client/src/pages/settings/2fa.vue
index 4a1598e168..ae57809960 100644
--- a/packages/client/src/pages/settings/2fa.vue
+++ b/packages/client/src/pages/settings/2fa.vue
@@ -116,7 +116,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, defineAsyncComponent } from "vue";
+import { ref, defineAsyncComponent, computed } from "vue";
 import { hostname } from "@/config";
 import { byteify, hexify, stringify } from "@/scripts/2fa";
 import MkButton from "@/components/MkButton.vue";
@@ -141,7 +141,7 @@ withDefaults(
 
 const twoFactorData = ref<any>(null);
 const supportsCredentials = ref(!!navigator.credentials);
-const usePasswordLessLogin = $computed(() => $i!.usePasswordLessLogin);
+const usePasswordLessLogin = computed(() => $i!.usePasswordLessLogin);
 
 async function registerTOTP() {
 	const password = await os.inputText({
diff --git a/packages/client/src/pages/settings/account-info.vue b/packages/client/src/pages/settings/account-info.vue
index faaee07db0..d4c61b0d27 100644
--- a/packages/client/src/pages/settings/account-info.vue
+++ b/packages/client/src/pages/settings/account-info.vue
@@ -173,7 +173,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref } from "vue";
+import { onMounted, ref, computed } from "vue";
 import FormSection from "@/components/form/section.vue";
 import MkKeyValue from "@/components/MkKeyValue.vue";
 import * as os from "@/os";
@@ -193,9 +193,9 @@ onMounted(() => {
 	});
 });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.accountInfo,
diff --git a/packages/client/src/pages/settings/accounts.vue b/packages/client/src/pages/settings/accounts.vue
index 52a9fb15a7..83c3866b41 100644
--- a/packages/client/src/pages/settings/accounts.vue
+++ b/packages/client/src/pages/settings/accounts.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, ref } from "vue";
+import { defineAsyncComponent, ref, computed } from "vue";
 import FormSuspense from "@/components/form/suspense.vue";
 import FormButton from "@/components/MkButton.vue";
 import * as os from "@/os";
@@ -144,9 +144,9 @@ function switchAccountWithToken(token: string) {
 	login(token);
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.accounts,
diff --git a/packages/client/src/pages/settings/api.vue b/packages/client/src/pages/settings/api.vue
index 910ebaa573..fb85acf0ca 100644
--- a/packages/client/src/pages/settings/api.vue
+++ b/packages/client/src/pages/settings/api.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, ref } from "vue";
+import { defineAsyncComponent, ref, computed } from "vue";
 import FormLink from "@/components/form/link.vue";
 import FormButton from "@/components/MkButton.vue";
 import * as os from "@/os";
@@ -51,9 +51,9 @@ function generateToken() {
 	);
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: "API",
diff --git a/packages/client/src/pages/settings/apps.vue b/packages/client/src/pages/settings/apps.vue
index f42bb77baa..687d1dae95 100644
--- a/packages/client/src/pages/settings/apps.vue
+++ b/packages/client/src/pages/settings/apps.vue
@@ -55,7 +55,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import FormPagination from "@/components/MkPagination.vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
@@ -77,9 +77,9 @@ function revoke(token) {
 	});
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.installedApps,
diff --git a/packages/client/src/pages/settings/custom-css.vue b/packages/client/src/pages/settings/custom-css.vue
index e24ff33a9f..d6fd68ad26 100644
--- a/packages/client/src/pages/settings/custom-css.vue
+++ b/packages/client/src/pages/settings/custom-css.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import FormTextarea from "@/components/form/textarea.vue";
 import FormInfo from "@/components/MkInfo.vue";
 import * as os from "@/os";
@@ -41,9 +41,9 @@ watch(localCustomCss, async () => {
 	await apply();
 });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.customCss,
diff --git a/packages/client/src/pages/settings/custom-katex-macro.vue b/packages/client/src/pages/settings/custom-katex-macro.vue
index 67818f9e05..24869b1bc6 100644
--- a/packages/client/src/pages/settings/custom-katex-macro.vue
+++ b/packages/client/src/pages/settings/custom-katex-macro.vue
@@ -59,9 +59,9 @@ watch(localCustomKaTeXMacro, async () => {
 	await apply();
 });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.customKaTeXMacro,
diff --git a/packages/client/src/pages/settings/deck.vue b/packages/client/src/pages/settings/deck.vue
index 99f21277f1..cb0c5f8e13 100644
--- a/packages/client/src/pages/settings/deck.vue
+++ b/packages/client/src/pages/settings/deck.vue
@@ -35,9 +35,9 @@ const alwaysShowMainColumn = computed(
 );
 const columnAlign = computed(deckStore.makeGetterSetter("columnAlign"));
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.deck,
diff --git a/packages/client/src/pages/settings/delete-account.vue b/packages/client/src/pages/settings/delete-account.vue
index 574806c08f..ba604dfc84 100644
--- a/packages/client/src/pages/settings/delete-account.vue
+++ b/packages/client/src/pages/settings/delete-account.vue
@@ -20,6 +20,8 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from "vue";
+
 import FormInfo from "@/components/MkInfo.vue";
 import FormButton from "@/components/MkButton.vue";
 import * as os from "@/os";
@@ -53,9 +55,9 @@ async function deleteAccount() {
 	await signout();
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts._accountDelete.accountDelete,
diff --git a/packages/client/src/pages/settings/drive.vue b/packages/client/src/pages/settings/drive.vue
index 847b50aebe..f8d567dbf5 100644
--- a/packages/client/src/pages/settings/drive.vue
+++ b/packages/client/src/pages/settings/drive.vue
@@ -92,8 +92,8 @@ const fetching = ref(true);
 const usage = ref<any>(null);
 const capacity = ref<any>(null);
 const uploadFolder = ref<any>(null);
-let alwaysMarkNsfw = $ref($i.alwaysMarkNsfw);
-let autoSensitive = $ref($i.autoSensitive);
+let alwaysMarkNsfw = ref($i.alwaysMarkNsfw);
+let autoSensitive = ref($i.autoSensitive);
 
 const meterStyle = computed(() => {
 	return {
@@ -140,14 +140,14 @@ function chooseUploadFolder() {
 
 function saveProfile() {
 	os.api("i/update", {
-		alwaysMarkNsfw: !!alwaysMarkNsfw,
-		autoSensitive: !!autoSensitive,
+		alwaysMarkNsfw: !!alwaysMarkNsfw.value,
+		autoSensitive: !!autoSensitive.value,
 	});
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.drive,
diff --git a/packages/client/src/pages/settings/email.vue b/packages/client/src/pages/settings/email.vue
index 089a9d0a97..4a9480027a 100644
--- a/packages/client/src/pages/settings/email.vue
+++ b/packages/client/src/pages/settings/email.vue
@@ -61,7 +61,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted, ref, watch } from "vue";
+import { onMounted, ref, watch, computed } from "vue";
 import FormSection from "@/components/form/section.vue";
 import FormInput from "@/components/form/input.vue";
 import FormSwitch from "@/components/form/switch.vue";
@@ -147,9 +147,9 @@ onMounted(() => {
 	});
 });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.email,
diff --git a/packages/client/src/pages/settings/general.vue b/packages/client/src/pages/settings/general.vue
index e7a8183f3a..fd8df7cdb1 100644
--- a/packages/client/src/pages/settings/general.vue
+++ b/packages/client/src/pages/settings/general.vue
@@ -408,9 +408,9 @@ watch(
 	},
 );
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.general,
diff --git a/packages/client/src/pages/settings/import-export.vue b/packages/client/src/pages/settings/import-export.vue
index 19cfac58f8..8b35d5d99a 100644
--- a/packages/client/src/pages/settings/import-export.vue
+++ b/packages/client/src/pages/settings/import-export.vue
@@ -176,7 +176,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref, computed } from "vue";
 import MkButton from "@/components/MkButton.vue";
 import FormSection from "@/components/form/section.vue";
 import FormFolder from "@/components/form/folder.vue";
@@ -275,9 +275,9 @@ const importBlocking = async (ev) => {
 		.catch(onError);
 };
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.importAndExport,
diff --git a/packages/client/src/pages/settings/index.vue b/packages/client/src/pages/settings/index.vue
index def40a277b..bf58c74435 100644
--- a/packages/client/src/pages/settings/index.vue
+++ b/packages/client/src/pages/settings/index.vue
@@ -79,14 +79,14 @@ const childInfo = ref(null);
 
 const router = useRouter();
 
-let narrow = $ref(false);
+let narrow = ref(false);
 const NARROW_THRESHOLD = 600;
 
-let currentPage = $computed(() => router.currentRef.value.child);
+let currentPage = computed(() => router.currentRef.value.child);
 
 const ro = new ResizeObserver((entries, observer) => {
 	if (entries.length === 0) return;
-	narrow = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
+	narrow.value = entries[0].borderBoxSize[0].inlineSize < NARROW_THRESHOLD;
 });
 
 const menuDef = computed(() => [
@@ -97,49 +97,49 @@ const menuDef = computed(() => [
 				icon: "ph-user ph-bold ph-lg",
 				text: i18n.ts.profile,
 				to: "/settings/profile",
-				active: currentPage?.route.name === "profile",
+				active: currentPage.value?.route.name === "profile",
 			},
 			{
 				icon: "ph-keyhole ph-bold ph-lg",
 				text: i18n.ts.privacy,
 				to: "/settings/privacy",
-				active: currentPage?.route.name === "privacy",
+				active: currentPage.value?.route.name === "privacy",
 			},
 			{
 				icon: "ph-smiley ph-bold ph-lg",
 				text: i18n.ts.reaction,
 				to: "/settings/reaction",
-				active: currentPage?.route.name === "reaction",
+				active: currentPage.value?.route.name === "reaction",
 			},
 			{
 				icon: "ph-cloud ph-bold ph-lg",
 				text: i18n.ts.drive,
 				to: "/settings/drive",
-				active: currentPage?.route.name === "drive",
+				active: currentPage.value?.route.name === "drive",
 			},
 			{
 				icon: "ph-bell ph-bold ph-lg",
 				text: i18n.ts.notifications,
 				to: "/settings/notifications",
-				active: currentPage?.route.name === "notifications",
+				active: currentPage.value?.route.name === "notifications",
 			},
 			{
 				icon: "ph-envelope-simple-open ph-bold ph-lg",
 				text: i18n.ts.email,
 				to: "/settings/email",
-				active: currentPage?.route.name === "email",
+				active: currentPage.value?.route.name === "email",
 			},
 			{
 				icon: "ph-share-network ph-bold ph-lg",
 				text: i18n.ts.integration,
 				to: "/settings/integration",
-				active: currentPage?.route.name === "integration",
+				active: currentPage.value?.route.name === "integration",
 			},
 			{
 				icon: "ph-lock ph-bold ph-lg",
 				text: i18n.ts.security,
 				to: "/settings/security",
-				active: currentPage?.route.name === "security",
+				active: currentPage.value?.route.name === "security",
 			},
 		],
 	},
@@ -150,37 +150,37 @@ const menuDef = computed(() => [
 				icon: "ph-gear-six ph-bold ph-lg",
 				text: i18n.ts.general,
 				to: "/settings/general",
-				active: currentPage?.route.name === "general",
+				active: currentPage.value?.route.name === "general",
 			},
 			{
 				icon: "ph-palette ph-bold ph-lg",
 				text: i18n.ts.theme,
 				to: "/settings/theme",
-				active: currentPage?.route.name === "theme",
+				active: currentPage.value?.route.name === "theme",
 			},
 			{
 				icon: "ph-list ph-bold ph-lg",
 				text: i18n.ts.navbar,
 				to: "/settings/navbar",
-				active: currentPage?.route.name === "navbar",
+				active: currentPage.value?.route.name === "navbar",
 			},
 			{
 				icon: "ph-traffic-signal ph-bold ph-lg",
 				text: i18n.ts.statusbar,
 				to: "/settings/statusbar",
-				active: currentPage?.route.name === "statusbar",
+				active: currentPage.value?.route.name === "statusbar",
 			},
 			{
 				icon: "ph-speaker-high ph-bold ph-lg",
 				text: i18n.ts.sounds,
 				to: "/settings/sounds",
-				active: currentPage?.route.name === "sounds",
+				active: currentPage.value?.route.name === "sounds",
 			},
 			{
 				icon: "ph-plug ph-bold ph-lg",
 				text: i18n.ts.plugins,
 				to: "/settings/plugin",
-				active: currentPage?.route.name === "plugin",
+				active: currentPage.value?.route.name === "plugin",
 			},
 		],
 	},
@@ -191,49 +191,49 @@ const menuDef = computed(() => [
 				icon: "ph-airplane-takeoff ph-bold ph-lg",
 				text: i18n.ts.migration,
 				to: "/settings/migration",
-				active: currentPage?.route.name === "migration",
+				active: currentPage.value?.route.name === "migration",
 			},
 			{
 				icon: "ph-package ph-bold ph-lg",
 				text: i18n.ts.importAndExport,
 				to: "/settings/import-export",
-				active: currentPage?.route.name === "import-export",
+				active: currentPage.value?.route.name === "import-export",
 			},
 			{
 				icon: "ph-speaker-none ph-bold ph-lg",
 				text: i18n.ts.instanceMute,
 				to: "/settings/instance-mute",
-				active: currentPage?.route.name === "instance-mute",
+				active: currentPage.value?.route.name === "instance-mute",
 			},
 			{
 				icon: "ph-prohibit ph-bold ph-lg",
 				text: i18n.ts.muteAndBlock,
 				to: "/settings/mute-block",
-				active: currentPage?.route.name === "mute-block",
+				active: currentPage.value?.route.name === "mute-block",
 			},
 			{
 				icon: "ph-speaker-x ph-bold ph-lg",
 				text: i18n.ts.wordMute,
 				to: "/settings/word-mute",
-				active: currentPage?.route.name === "word-mute",
+				active: currentPage.value?.route.name === "word-mute",
 			},
 			{
 				icon: "ph-key ph-bold ph-lg",
 				text: "API",
 				to: "/settings/api",
-				active: currentPage?.route.name === "api",
+				active: currentPage.value?.route.name === "api",
 			},
 			{
 				icon: "ph-webhooks-logo ph-bold ph-lg",
 				text: "Webhook",
 				to: "/settings/webhook",
-				active: currentPage?.route.name === "webhook",
+				active: currentPage.value?.route.name === "webhook",
 			},
 			{
 				icon: "ph-dots-three-outline ph-bold ph-lg",
 				text: i18n.ts.other,
 				to: "/settings/other",
-				active: currentPage?.route.name === "other",
+				active: currentPage.value?.route.name === "other",
 			},
 		],
 	},
@@ -243,7 +243,7 @@ const menuDef = computed(() => [
 				icon: "ph-floppy-disk ph-bold ph-lg",
 				text: i18n.ts.preferencesBackups,
 				to: "/settings/preferences-backups",
-				active: currentPage?.route.name === "preferences-backups",
+				active: currentPage.value?.route.name === "preferences-backups",
 			},
 			{
 				type: "button",
@@ -273,22 +273,22 @@ const menuDef = computed(() => [
 	},
 ]);
 
-watch($$(narrow), () => {});
+watch(narrow, () => {});
 
 onMounted(() => {
 	ro.observe(el.value);
 
-	narrow = el.value.offsetWidth < NARROW_THRESHOLD;
+	narrow.value = el.value.offsetWidth < NARROW_THRESHOLD;
 
-	if (!narrow && currentPage?.route.name == null) {
+	if (!narrow.value && currentPage.value?.route.name == null) {
 		router.replace("/settings/profile");
 	}
 });
 
 onActivated(() => {
-	narrow = el.value.offsetWidth < NARROW_THRESHOLD;
+	narrow.value = el.value.offsetWidth < NARROW_THRESHOLD;
 
-	if (!narrow && currentPage?.route.name == null) {
+	if (!narrow.value && currentPage.value?.route.name == null) {
 		router.replace("/settings/profile");
 	}
 });
@@ -301,7 +301,7 @@ watch(router.currentRef, (to) => {
 	if (
 		to.route.name === "settings" &&
 		to.child?.route.name == null &&
-		!narrow
+		!narrow.value
 	) {
 		router.replace("/settings/profile");
 	}
@@ -319,9 +319,9 @@ provideMetadataReceiver((info) => {
 	}
 });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata(INFO);
 // w 890
diff --git a/packages/client/src/pages/settings/instance-mute.vue b/packages/client/src/pages/settings/instance-mute.vue
index 4c8ce7a3d3..8a8f376072 100644
--- a/packages/client/src/pages/settings/instance-mute.vue
+++ b/packages/client/src/pages/settings/instance-mute.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import FormTextarea from "@/components/form/textarea.vue";
 import MkInfo from "@/components/MkInfo.vue";
 import MkButton from "@/components/MkButton.vue";
@@ -54,9 +54,9 @@ watch(instanceMutes, () => {
 	changed.value = true;
 });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.instanceMute,
diff --git a/packages/client/src/pages/settings/integration.vue b/packages/client/src/pages/settings/integration.vue
index ef4182f395..0e6833f44d 100644
--- a/packages/client/src/pages/settings/integration.vue
+++ b/packages/client/src/pages/settings/integration.vue
@@ -119,9 +119,9 @@ onMounted(() => {
 	});
 });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.integration,
diff --git a/packages/client/src/pages/settings/migration.vue b/packages/client/src/pages/settings/migration.vue
index 413f0c9fd9..f747ca29f3 100644
--- a/packages/client/src/pages/settings/migration.vue
+++ b/packages/client/src/pages/settings/migration.vue
@@ -51,6 +51,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import FormSection from "@/components/form/section.vue";
 import FormInput from "@/components/form/input.vue";
 import FormButton from "@/components/MkButton.vue";
@@ -61,33 +63,35 @@ import { definePageMetadata } from "@/scripts/page-metadata";
 import { $i } from "@/account";
 import { toString } from "firefish-js/built/acct";
 
-let moveToAccount = $ref("");
-let accountAlias = $ref([""]);
+let moveToAccount = ref("");
+let accountAlias = ref([""]);
 
 await init();
 
 async function init() {
 	if ($i?.alsoKnownAs && $i.alsoKnownAs.length > 0) {
 		const aka = await os.api("users/show", { userIds: $i.alsoKnownAs });
-		accountAlias =
+		accountAlias.value =
 			aka && aka.length > 0
 				? aka.map((user) => `@${toString(user)}`)
 				: [""];
 	} else {
-		accountAlias = [""];
+		accountAlias.value = [""];
 	}
 }
 
 async function save(): Promise<void> {
 	const i = await os.apiWithDialog("i/known-as", {
-		alsoKnownAs: accountAlias.map((e) => e.trim()).filter((e) => e !== ""),
+		alsoKnownAs: accountAlias.value
+			.map((e) => e.trim())
+			.filter((e) => e !== ""),
 	});
 	$i.alsoKnownAs = i.alsoKnownAs;
 	await init();
 }
 
 function add(): void {
-	accountAlias.push("");
+	accountAlias.value.push("");
 }
 
 async function move(account): Promise<void> {
diff --git a/packages/client/src/pages/settings/mute-block.vue b/packages/client/src/pages/settings/mute-block.vue
index 81e9ec8752..08e1a1797e 100644
--- a/packages/client/src/pages/settings/mute-block.vue
+++ b/packages/client/src/pages/settings/mute-block.vue
@@ -40,6 +40,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, computed } from "vue";
+
 import {} from "vue";
 import MkPagination from "@/components/MkPagination.vue";
 import MkTab from "@/components/MkTab.vue";
@@ -50,7 +52,7 @@ import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-let tab = $ref("mute");
+let tab = ref("mute");
 
 const mutingPagination = {
 	endpoint: "mute/list" as const,
@@ -62,9 +64,9 @@ const blockingPagination = {
 	limit: 10,
 };
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.muteAndBlock,
diff --git a/packages/client/src/pages/settings/navbar.vue b/packages/client/src/pages/settings/navbar.vue
index d7b6c1d49d..58bf607aad 100644
--- a/packages/client/src/pages/settings/navbar.vue
+++ b/packages/client/src/pages/settings/navbar.vue
@@ -130,9 +130,9 @@ watch(menuDisplay, async () => {
 	await reloadAsk();
 });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.navbar,
diff --git a/packages/client/src/pages/settings/notifications.vue b/packages/client/src/pages/settings/notifications.vue
index da532b7703..9f020a3abf 100644
--- a/packages/client/src/pages/settings/notifications.vue
+++ b/packages/client/src/pages/settings/notifications.vue
@@ -49,7 +49,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent } from "vue";
+import { defineAsyncComponent, shallowRef, computed } from "vue";
 import { notificationTypes } from "firefish-js";
 import FormButton from "@/components/MkButton.vue";
 import FormLink from "@/components/form/link.vue";
@@ -61,12 +61,12 @@ import { definePageMetadata } from "@/scripts/page-metadata";
 import MkPushNotificationAllowButton from "@/components/MkPushNotificationAllowButton.vue";
 
 let allowButton =
-	$shallowRef<InstanceType<typeof MkPushNotificationAllowButton>>();
-let pushRegistrationInServer = $computed(
-	() => allowButton?.pushRegistrationInServer,
+	shallowRef<InstanceType<typeof MkPushNotificationAllowButton>>();
+let pushRegistrationInServer = computed(
+	() => allowButton.value?.pushRegistrationInServer,
 );
-let sendReadMessage = $computed(
-	() => pushRegistrationInServer?.sendReadMessage || false,
+let sendReadMessage = computed(
+	() => pushRegistrationInServer.value?.sendReadMessage || false,
 );
 
 async function readAllUnreadNotes() {
@@ -112,20 +112,20 @@ function configure() {
 }
 
 function onChangeSendReadMessage(v: boolean) {
-	if (!pushRegistrationInServer) return;
+	if (!pushRegistrationInServer.value) return;
 
 	os.apiWithDialog("sw/update-registration", {
-		endpoint: pushRegistrationInServer.endpoint,
+		endpoint: pushRegistrationInServer.value.endpoint,
 		sendReadMessage: v,
 	}).then((res) => {
-		if (!allowButton) return;
-		allowButton.pushRegistrationInServer = res;
+		if (!allowButton.value) return;
+		allowButton.value.pushRegistrationInServer = res;
 	});
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.notifications,
diff --git a/packages/client/src/pages/settings/other.vue b/packages/client/src/pages/settings/other.vue
index 6a069493f5..60dedadecc 100644
--- a/packages/client/src/pages/settings/other.vue
+++ b/packages/client/src/pages/settings/other.vue
@@ -50,9 +50,9 @@ function onChangeInjectFeaturedNote(v) {
 	});
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.other,
diff --git a/packages/client/src/pages/settings/plugin.install.vue b/packages/client/src/pages/settings/plugin.install.vue
index a38c4a0626..00b07a9b3d 100644
--- a/packages/client/src/pages/settings/plugin.install.vue
+++ b/packages/client/src/pages/settings/plugin.install.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, nextTick, ref } from "vue";
+import { defineAsyncComponent, nextTick, ref, computed } from "vue";
 import { AiScript, parse } from "@syuilo/aiscript";
 import { serialize } from "@syuilo/aiscript/built/serializer";
 import { v4 as uuid } from "uuid";
@@ -144,9 +144,9 @@ async function install() {
 	});
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts._plugin.install,
diff --git a/packages/client/src/pages/settings/plugin.vue b/packages/client/src/pages/settings/plugin.vue
index b5e1b76dc5..06f1938648 100644
--- a/packages/client/src/pages/settings/plugin.vue
+++ b/packages/client/src/pages/settings/plugin.vue
@@ -60,7 +60,7 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, ref } from "vue";
+import { nextTick, ref, computed } from "vue";
 import FormLink from "@/components/form/link.vue";
 import FormSwitch from "@/components/form/switch.vue";
 import FormSection from "@/components/form/section.vue";
@@ -114,9 +114,9 @@ function changeActive(plugin, active) {
 	});
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.plugins,
diff --git a/packages/client/src/pages/settings/preferences-backups.vue b/packages/client/src/pages/settings/preferences-backups.vue
index dcee4587fb..bb37e9aa5f 100644
--- a/packages/client/src/pages/settings/preferences-backups.vue
+++ b/packages/client/src/pages/settings/preferences-backups.vue
@@ -56,7 +56,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, onMounted, onUnmounted, useCssModule } from "vue";
+import { computed, onMounted, onUnmounted, useCssModule, ref } from "vue";
 import { v4 as uuid } from "uuid";
 import FormSection from "@/components/form/section.vue";
 import MkButton from "@/components/MkButton.vue";
@@ -161,10 +161,10 @@ type Profile = {
 
 const connection = $i && stream.useChannel("main");
 
-let profiles = $ref<Record<string, Profile> | null>(null);
+let profiles = ref<Record<string, Profile> | null>(null);
 
 os.api("i/registry/get-all", { scope }).then((res) => {
-	profiles = res || {};
+	profiles.value = res || {};
 });
 
 function isObject(value: unknown): value is Record<string, unknown> {
@@ -226,14 +226,14 @@ function getSettings(): Profile["settings"] {
 }
 
 async function saveNew(): Promise<void> {
-	if (!profiles) return;
+	if (!profiles.value) return;
 
 	const { canceled, result: name } = await os.inputText({
 		title: ts._preferencesBackups.inputName,
 	});
 	if (canceled) return;
 
-	if (Object.values(profiles).some((x) => x.name === name)) {
+	if (Object.values(profiles.value).some((x) => x.name === name)) {
 		return os.alert({
 			title: ts._preferencesBackups.cannotSave,
 			text: t("_preferencesBackups.nameAlreadyExists", { name }),
@@ -261,7 +261,7 @@ function loadFile(): void {
 	input.type = "file";
 	input.multiple = false;
 	input.onchange = async () => {
-		if (!profiles) return;
+		if (!profiles.value) return;
 		if (!input.files || input.files.length === 0) return;
 
 		const file = input.files[0];
@@ -305,9 +305,9 @@ function loadFile(): void {
 }
 
 async function applyProfile(id: string): Promise<void> {
-	if (!profiles) return;
+	if (!profiles.value) return;
 
-	const profile = profiles[id];
+	const profile = profiles.value[id];
 
 	const { canceled: cancel1 } = await os.confirm({
 		type: "warning",
@@ -365,23 +365,23 @@ async function applyProfile(id: string): Promise<void> {
 }
 
 async function deleteProfile(id: string): Promise<void> {
-	if (!profiles) return;
+	if (!profiles.value) return;
 
 	const { canceled } = await os.confirm({
 		type: "info",
 		title: ts.delete,
-		text: t("deleteAreYouSure", { x: profiles[id].name }),
+		text: t("deleteAreYouSure", { x: profiles.value[id].name }),
 	});
 	if (canceled) return;
 
 	await os.apiWithDialog("i/registry/remove", { scope, key: id });
-	delete profiles[id];
+	delete profiles.value[id];
 }
 
 async function save(id: string): Promise<void> {
-	if (!profiles) return;
+	if (!profiles.value) return;
 
-	const { name, createdAt } = profiles[id];
+	const { name, createdAt } = profiles.value[id];
 
 	const { canceled } = await os.confirm({
 		type: "info",
@@ -406,21 +406,21 @@ async function save(id: string): Promise<void> {
 }
 
 async function rename(id: string): Promise<void> {
-	if (!profiles) return;
+	if (!profiles.value) return;
 
 	const { canceled: cancel1, result: name } = await os.inputText({
 		title: ts._preferencesBackups.inputName,
 	});
-	if (cancel1 || profiles[id].name === name) return;
+	if (cancel1 || profiles.value[id].name === name) return;
 
-	if (Object.values(profiles).some((x) => x.name === name)) {
+	if (Object.values(profiles.value).some((x) => x.name === name)) {
 		return os.alert({
 			title: ts._preferencesBackups.cannotSave,
 			text: t("_preferencesBackups.nameAlreadyExists", { name }),
 		});
 	}
 
-	const registry = Object.assign({}, { ...profiles[id] });
+	const registry = Object.assign({}, { ...profiles.value[id] });
 
 	const { canceled: cancel2 } = await os.confirm({
 		type: "info",
@@ -441,7 +441,7 @@ async function rename(id: string): Promise<void> {
 }
 
 function menu(ev: MouseEvent, profileId: string) {
-	if (!profiles) return;
+	if (!profiles.value) return;
 
 	return os.popupMenu(
 		[
@@ -455,11 +455,14 @@ function menu(ev: MouseEvent, profileId: string) {
 				text: ts.download,
 				icon: "ph-download-simple ph-bold ph-lg",
 				href: URL.createObjectURL(
-					new Blob([JSON.stringify(profiles[profileId], null, 2)], {
-						type: "application/json",
-					}),
+					new Blob(
+						[JSON.stringify(profiles.value[profileId], null, 2)],
+						{
+							type: "application/json",
+						},
+					),
 				),
-				download: `${profiles[profileId].name}.json`,
+				download: `${profiles.value[profileId].name}.json`,
 			},
 			null,
 			{
@@ -495,9 +498,9 @@ onMounted(() => {
 				recievedScope[0] !== scope[0]
 			)
 				return;
-			if (!profiles) return;
+			if (!profiles.value) return;
 
-			profiles[key] = value;
+			profiles.value[key] = value;
 		},
 	);
 });
diff --git a/packages/client/src/pages/settings/privacy.vue b/packages/client/src/pages/settings/privacy.vue
index 554b5498e2..0d13923559 100644
--- a/packages/client/src/pages/settings/privacy.vue
+++ b/packages/client/src/pages/settings/privacy.vue
@@ -140,6 +140,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, computed } from "vue";
+
 import {} from "vue";
 import FormSwitch from "@/components/form/switch.vue";
 import FormSelect from "@/components/form/select.vue";
@@ -151,43 +153,43 @@ import { i18n } from "@/i18n";
 import { $i } from "@/account";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-let isLocked = $ref($i.isLocked);
-let autoAcceptFollowed = $ref($i.autoAcceptFollowed);
-let noCrawle = $ref($i.noCrawle);
-let isExplorable = $ref($i.isExplorable);
-let hideOnlineStatus = $ref($i.hideOnlineStatus);
-let publicReactions = $ref($i.publicReactions);
-let ffVisibility = $ref($i.ffVisibility);
-let preventAiLearning = $ref($i.preventAiLearning);
+let isLocked = ref($i.isLocked);
+let autoAcceptFollowed = ref($i.autoAcceptFollowed);
+let noCrawle = ref($i.noCrawle);
+let isExplorable = ref($i.isExplorable);
+let hideOnlineStatus = ref($i.hideOnlineStatus);
+let publicReactions = ref($i.publicReactions);
+let ffVisibility = ref($i.ffVisibility);
+let preventAiLearning = ref($i.preventAiLearning);
 
-let defaultNoteVisibility = $computed(
+let defaultNoteVisibility = computed(
 	defaultStore.makeGetterSetter("defaultNoteVisibility"),
 );
-let defaultNoteLocalOnly = $computed(
+let defaultNoteLocalOnly = computed(
 	defaultStore.makeGetterSetter("defaultNoteLocalOnly"),
 );
-let rememberNoteVisibility = $computed(
+let rememberNoteVisibility = computed(
 	defaultStore.makeGetterSetter("rememberNoteVisibility"),
 );
-let keepCw = $computed(defaultStore.makeGetterSetter("keepCw"));
-let addRe = $computed(defaultStore.makeGetterSetter("addRe"));
+let keepCw = computed(defaultStore.makeGetterSetter("keepCw"));
+let addRe = computed(defaultStore.makeGetterSetter("addRe"));
 
 function save() {
 	os.api("i/update", {
-		isLocked: !!isLocked,
-		autoAcceptFollowed: !!autoAcceptFollowed,
-		noCrawle: !!noCrawle,
-		isExplorable: !!isExplorable,
-		hideOnlineStatus: !!hideOnlineStatus,
-		publicReactions: !!publicReactions,
-		preventAiLearning: !!preventAiLearning,
-		ffVisibility: ffVisibility,
+		isLocked: !!isLocked.value,
+		autoAcceptFollowed: !!autoAcceptFollowed.value,
+		noCrawle: !!noCrawle.value,
+		isExplorable: !!isExplorable.value,
+		hideOnlineStatus: !!hideOnlineStatus.value,
+		publicReactions: !!publicReactions.value,
+		preventAiLearning: !!preventAiLearning.value,
+		ffVisibility: ffVisibility.value,
 	});
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.privacy,
diff --git a/packages/client/src/pages/settings/profile.vue b/packages/client/src/pages/settings/profile.vue
index fa33ac8876..a5c299f4da 100644
--- a/packages/client/src/pages/settings/profile.vue
+++ b/packages/client/src/pages/settings/profile.vue
@@ -162,7 +162,7 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, watch } from "vue";
+import { reactive, watch, ref, computed } from "vue";
 import MkButton from "@/components/MkButton.vue";
 import FormInput from "@/components/form/input.vue";
 import FormTextarea from "@/components/form/textarea.vue";
@@ -197,7 +197,7 @@ const props = withDefaults(
 	{},
 );
 
-let saveButton = $ref(props.saveButton ?? false);
+let saveButton = ref(props.saveButton ?? false);
 
 watch(
 	() => profile,
@@ -295,9 +295,9 @@ function changeBanner(ev) {
 	);
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.profile,
diff --git a/packages/client/src/pages/settings/reaction.vue b/packages/client/src/pages/settings/reaction.vue
index 29f14fd48a..9dfe619eec 100644
--- a/packages/client/src/pages/settings/reaction.vue
+++ b/packages/client/src/pages/settings/reaction.vue
@@ -121,7 +121,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, watch } from "vue";
+import { defineAsyncComponent, watch, ref, computed } from "vue";
 import { VueDraggable } from "vue-draggable-plus";
 import FormRadios from "@/components/form/radios.vue";
 import FromSlot from "@/components/form/slot.vue";
@@ -146,32 +146,32 @@ async function reloadAsk() {
 	unisonReload();
 }
 
-let reactions = $ref(deepClone(defaultStore.state.reactions));
+let reactions = ref(deepClone(defaultStore.state.reactions));
 
-const reactionPickerSkinTone = $computed(
+const reactionPickerSkinTone = computed(
 	defaultStore.makeGetterSetter("reactionPickerSkinTone"),
 );
-const reactionPickerSize = $computed(
+const reactionPickerSize = computed(
 	defaultStore.makeGetterSetter("reactionPickerSize"),
 );
-const reactionPickerWidth = $computed(
+const reactionPickerWidth = computed(
 	defaultStore.makeGetterSetter("reactionPickerWidth"),
 );
-const reactionPickerHeight = $computed(
+const reactionPickerHeight = computed(
 	defaultStore.makeGetterSetter("reactionPickerHeight"),
 );
-const reactionPickerUseDrawerForMobile = $computed(
+const reactionPickerUseDrawerForMobile = computed(
 	defaultStore.makeGetterSetter("reactionPickerUseDrawerForMobile"),
 );
-const enableEmojiReactions = $computed(
+const enableEmojiReactions = computed(
 	defaultStore.makeGetterSetter("enableEmojiReactions"),
 );
-const showEmojisInReactionNotifications = $computed(
+const showEmojisInReactionNotifications = computed(
 	defaultStore.makeGetterSetter("showEmojisInReactionNotifications"),
 );
 
 function save() {
-	defaultStore.set("reactions", reactions);
+	defaultStore.set("reactions", reactions.value);
 }
 
 function remove(reaction, ev: MouseEvent) {
@@ -180,7 +180,9 @@ function remove(reaction, ev: MouseEvent) {
 			{
 				text: i18n.ts.remove,
 				action: () => {
-					reactions = reactions.filter((x) => x !== reaction);
+					reactions.value = reactions.value.filter(
+						(x) => x !== reaction,
+					);
 					save();
 				},
 			},
@@ -210,34 +212,34 @@ async function setDefault() {
 	});
 	if (canceled) return;
 
-	reactions = deepClone(defaultStore.def.reactions.default);
+	reactions.value = deepClone(defaultStore.def.reactions.default);
 }
 
 function chooseEmoji(ev: MouseEvent) {
 	os.pickEmoji(ev.currentTarget ?? ev.target, {
 		showPinned: false,
 	}).then((emoji) => {
-		if (!reactions.includes(emoji)) {
-			reactions.push(emoji);
+		if (!reactions.value.includes(emoji)) {
+			reactions.value.push(emoji);
 			save();
 		}
 	});
 }
 
-watch(enableEmojiReactions, async () => {
+watch(enableEmojiReactions.value, async () => {
 	await reloadAsk();
 });
 
-watch(reactionPickerSkinTone, async () => {
-	reactions.forEach((emoji) => {
-		addSkinTone(emoji, reactionPickerSkinTone.value);
+watch(reactionPickerSkinTone.value, async () => {
+	reactions.value.forEach((emoji) => {
+		addSkinTone(emoji, reactionPickerSkinTone.value.value);
 	});
 	await reloadAsk();
 });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.reaction,
diff --git a/packages/client/src/pages/settings/security.vue b/packages/client/src/pages/settings/security.vue
index d0979408bc..d62a44f44f 100644
--- a/packages/client/src/pages/settings/security.vue
+++ b/packages/client/src/pages/settings/security.vue
@@ -53,6 +53,8 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from "vue";
+
 import X2fa from "./2fa.vue";
 import FormSection from "@/components/form/section.vue";
 import FormSlot from "@/components/form/slot.vue";
@@ -117,9 +119,9 @@ function regenerateToken() {
 	});
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.security,
diff --git a/packages/client/src/pages/settings/sounds.vue b/packages/client/src/pages/settings/sounds.vue
index bc890a5697..e449015804 100644
--- a/packages/client/src/pages/settings/sounds.vue
+++ b/packages/client/src/pages/settings/sounds.vue
@@ -122,9 +122,9 @@ function reset() {
 	}
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.sounds,
diff --git a/packages/client/src/pages/settings/statusbar.vue b/packages/client/src/pages/settings/statusbar.vue
index 96a80e8c63..d79d965f1d 100644
--- a/packages/client/src/pages/settings/statusbar.vue
+++ b/packages/client/src/pages/settings/statusbar.vue
@@ -24,11 +24,11 @@ import { definePageMetadata } from "@/scripts/page-metadata";
 
 const statusbars = defaultStore.reactiveState.statusbars;
 
-let userLists = $ref();
+let userLists = ref();
 
 onMounted(() => {
 	os.api("users/lists/list").then((res) => {
-		userLists = res;
+		userLists.value = res;
 	});
 });
 
@@ -42,9 +42,9 @@ async function add() {
 	});
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.statusbar,
diff --git a/packages/client/src/pages/settings/theme.install.vue b/packages/client/src/pages/settings/theme.install.vue
index 0428de0f72..10423faefd 100644
--- a/packages/client/src/pages/settings/theme.install.vue
+++ b/packages/client/src/pages/settings/theme.install.vue
@@ -28,6 +28,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, computed } from "vue";
+
 import {} from "vue";
 import JSON5 from "json5";
 import FormTextarea from "@/components/form/textarea.vue";
@@ -38,7 +40,7 @@ import { addTheme, getThemes } from "@/theme-store";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-let installThemeCode = $ref(null);
+let installThemeCode = ref(null);
 
 function parseThemeCode(code: string) {
 	let theme;
@@ -85,9 +87,9 @@ async function install(code: string): Promise<void> {
 	});
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts._theme.install,
diff --git a/packages/client/src/pages/settings/theme.manage.vue b/packages/client/src/pages/settings/theme.manage.vue
index 79689b4e26..d075ff57c7 100644
--- a/packages/client/src/pages/settings/theme.manage.vue
+++ b/packages/client/src/pages/settings/theme.manage.vue
@@ -101,9 +101,9 @@ function uninstall() {
 	os.success();
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts._theme.manage,
diff --git a/packages/client/src/pages/settings/theme.vue b/packages/client/src/pages/settings/theme.vue
index 437f73182b..2b490be262 100644
--- a/packages/client/src/pages/settings/theme.vue
+++ b/packages/client/src/pages/settings/theme.vue
@@ -271,9 +271,9 @@ function setWallpaper(event) {
 	});
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.theme,
diff --git a/packages/client/src/pages/settings/webhook.edit.vue b/packages/client/src/pages/settings/webhook.edit.vue
index 9d171c446a..58eadb6b7a 100644
--- a/packages/client/src/pages/settings/webhook.edit.vue
+++ b/packages/client/src/pages/settings/webhook.edit.vue
@@ -54,6 +54,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, computed } from "vue";
+
 import {} from "vue";
 import FormInput from "@/components/form/input.vue";
 import FormSection from "@/components/form/section.vue";
@@ -71,41 +73,41 @@ const webhook = await os.api("i/webhooks/show", {
 	webhookId: props.webhookId,
 });
 
-let name = $ref(webhook.name);
-let url = $ref(webhook.url);
-let secret = $ref(webhook.secret);
-let active = $ref(webhook.active);
+let name = ref(webhook.name);
+let url = ref(webhook.url);
+let secret = ref(webhook.secret);
+let active = ref(webhook.active);
 
-let event_follow = $ref(webhook.on.includes("follow"));
-let event_followed = $ref(webhook.on.includes("followed"));
-let event_note = $ref(webhook.on.includes("note"));
-let event_reply = $ref(webhook.on.includes("reply"));
-let event_renote = $ref(webhook.on.includes("renote"));
-let event_reaction = $ref(webhook.on.includes("reaction"));
-let event_mention = $ref(webhook.on.includes("mention"));
+let event_follow = ref(webhook.on.includes("follow"));
+let event_followed = ref(webhook.on.includes("followed"));
+let event_note = ref(webhook.on.includes("note"));
+let event_reply = ref(webhook.on.includes("reply"));
+let event_renote = ref(webhook.on.includes("renote"));
+let event_reaction = ref(webhook.on.includes("reaction"));
+let event_mention = ref(webhook.on.includes("mention"));
 
 async function save(): Promise<void> {
 	const events = [];
-	if (event_follow) events.push("follow");
-	if (event_followed) events.push("followed");
-	if (event_note) events.push("note");
-	if (event_reply) events.push("reply");
-	if (event_renote) events.push("renote");
-	if (event_reaction) events.push("reaction");
-	if (event_mention) events.push("mention");
+	if (event_follow.value) events.push("follow");
+	if (event_followed.value) events.push("followed");
+	if (event_note.value) events.push("note");
+	if (event_reply.value) events.push("reply");
+	if (event_renote.value) events.push("renote");
+	if (event_reaction.value) events.push("reaction");
+	if (event_mention.value) events.push("mention");
 
 	os.apiWithDialog("i/webhooks/update", {
-		name,
-		url,
-		secret,
+		name: name.value,
+		url: url.value,
+		secret: secret.value,
 		on: events,
-		active,
+		active: active.value,
 	});
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: "Edit webhook",
diff --git a/packages/client/src/pages/settings/webhook.new.vue b/packages/client/src/pages/settings/webhook.new.vue
index 3ff25c3453..348923f110 100644
--- a/packages/client/src/pages/settings/webhook.new.vue
+++ b/packages/client/src/pages/settings/webhook.new.vue
@@ -52,6 +52,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, computed } from "vue";
+
 import {} from "vue";
 import FormInput from "@/components/form/input.vue";
 import FormSection from "@/components/form/section.vue";
@@ -61,39 +63,39 @@ import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-let name = $ref("");
-let url = $ref("");
-let secret = $ref("");
+let name = ref("");
+let url = ref("");
+let secret = ref("");
 
-let event_follow = $ref(true);
-let event_followed = $ref(true);
-let event_note = $ref(true);
-let event_reply = $ref(true);
-let event_renote = $ref(true);
-let event_reaction = $ref(true);
-let event_mention = $ref(true);
+let event_follow = ref(true);
+let event_followed = ref(true);
+let event_note = ref(true);
+let event_reply = ref(true);
+let event_renote = ref(true);
+let event_reaction = ref(true);
+let event_mention = ref(true);
 
 async function create(): Promise<void> {
 	const events = [];
-	if (event_follow) events.push("follow");
-	if (event_followed) events.push("followed");
-	if (event_note) events.push("note");
-	if (event_reply) events.push("reply");
-	if (event_renote) events.push("renote");
-	if (event_reaction) events.push("reaction");
-	if (event_mention) events.push("mention");
+	if (event_follow.value) events.push("follow");
+	if (event_followed.value) events.push("followed");
+	if (event_note.value) events.push("note");
+	if (event_reply.value) events.push("reply");
+	if (event_renote.value) events.push("renote");
+	if (event_reaction.value) events.push("reaction");
+	if (event_mention.value) events.push("mention");
 
 	os.apiWithDialog("i/webhooks/create", {
-		name,
-		url,
-		secret,
+		name: name.value,
+		url: url.value,
+		secret: secret.value,
 		on: events,
 	});
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: "Create new webhook",
diff --git a/packages/client/src/pages/settings/webhook.vue b/packages/client/src/pages/settings/webhook.vue
index e80b0dd83c..86a14783e1 100644
--- a/packages/client/src/pages/settings/webhook.vue
+++ b/packages/client/src/pages/settings/webhook.vue
@@ -52,6 +52,8 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from "vue";
+
 import {} from "vue";
 import MkPagination from "@/components/MkPagination.vue";
 import FormSection from "@/components/form/section.vue";
@@ -66,9 +68,9 @@ const pagination = {
 	limit: 10,
 };
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: "Webhook",
diff --git a/packages/client/src/pages/settings/word-mute.vue b/packages/client/src/pages/settings/word-mute.vue
index 9c69358bf9..7429b34914 100644
--- a/packages/client/src/pages/settings/word-mute.vue
+++ b/packages/client/src/pages/settings/word-mute.vue
@@ -50,7 +50,7 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, watch } from "vue";
+import { ref, watch, computed } from "vue";
 import FormTextarea from "@/components/form/textarea.vue";
 import MkKeyValue from "@/components/MkKeyValue.vue";
 import MkButton from "@/components/MkButton.vue";
@@ -151,9 +151,9 @@ async function save() {
 	changed.value = false;
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.wordMute,
diff --git a/packages/client/src/pages/share.vue b/packages/client/src/pages/share.vue
index 161eb16e9a..e764f04765 100644
--- a/packages/client/src/pages/share.vue
+++ b/packages/client/src/pages/share.vue
@@ -30,6 +30,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, computed } from "vue";
+
 // SPECIFICATION: https://misskey-hub.net/docs/features/share-form.html
 
 import {} from "vue";
@@ -47,33 +49,33 @@ const urlParams = new URLSearchParams(window.location.search);
 const localOnlyQuery = urlParams.get("localOnly");
 const visibilityQuery = urlParams.get("visibility");
 
-let state = $ref("fetching" as "fetching" | "writing" | "posted");
-let title = $ref(urlParams.get("title"));
+let state = ref("fetching" as "fetching" | "writing" | "posted");
+let title = ref(urlParams.get("title"));
 const text = urlParams.get("text");
 const url = urlParams.get("url");
-let initialText = $ref(null as string | null);
-let reply = $ref(null as Misskey.entities.Note | null);
-let renote = $ref(null as Misskey.entities.Note | null);
-let visibility = $ref(
+let initialText = ref(null as string | null);
+let reply = ref(null as Misskey.entities.Note | null);
+let renote = ref(null as Misskey.entities.Note | null);
+let visibility = ref(
 	noteVisibilities.includes(visibilityQuery) ? visibilityQuery : null,
 );
-let localOnly = $ref(
+let localOnly = ref(
 	localOnlyQuery === "0" ? false : localOnlyQuery === "1" ? true : null,
 );
-let files = $ref([] as Misskey.entities.DriveFile[]);
-let visibleUsers = $ref([] as Misskey.entities.User[]);
+let files = ref([] as Misskey.entities.DriveFile[]);
+let visibleUsers = ref([] as Misskey.entities.User[]);
 
 async function init() {
 	let noteText = "";
-	if (title) noteText += `[ ${title} ]\n`;
+	if (title.value) noteText += `[ ${title.value} ]\n`;
 	// Googleニュース対策
-	if (text?.startsWith(`${title}.\n`))
-		noteText += text.replace(`${title}.\n`, "");
-	else if (text && title !== text) noteText += `${text}\n`;
+	if (text?.startsWith(`${title.value}.\n`))
+		noteText += text.replace(`${title.value}.\n`, "");
+	else if (text && title.value !== text) noteText += `${text}\n`;
 	if (url) noteText += `${url}`;
-	initialText = noteText.trim();
+	initialText.value = noteText.trim();
 
-	if (visibility === "specified") {
+	if (visibility.value === "specified") {
 		const visibleUserIds = urlParams.get("visibleUserIds");
 		const visibleAccts = urlParams.get("visibleAccts");
 		await Promise.all(
@@ -97,7 +99,7 @@ async function init() {
 				.map((q) =>
 					os.api("users/show", q).then(
 						(user) => {
-							visibleUsers.push(user);
+							visibleUsers.value.push(user);
 						},
 						() => {
 							console.error(
@@ -114,7 +116,7 @@ async function init() {
 		const replyId = urlParams.get("replyId");
 		const replyUri = urlParams.get("replyUri");
 		if (replyId) {
-			reply = await os.api("notes/show", {
+			reply.value = await os.api("notes/show", {
 				noteId: replyId,
 			});
 		} else if (replyUri) {
@@ -122,7 +124,7 @@ async function init() {
 				uri: replyUri,
 			});
 			if (obj.type === "Note") {
-				reply = obj.object;
+				reply.value = obj.object;
 			}
 		}
 		//#endregion
@@ -131,7 +133,7 @@ async function init() {
 		const renoteId = urlParams.get("renoteId");
 		const renoteUri = urlParams.get("renoteUri");
 		if (renoteId) {
-			renote = await os.api("notes/show", {
+			renote.value = await os.api("notes/show", {
 				noteId: renoteId,
 			});
 		} else if (renoteUri) {
@@ -139,7 +141,7 @@ async function init() {
 				uri: renoteUri,
 			});
 			if (obj.type === "Note") {
-				renote = obj.object;
+				renote.value = obj.object;
 			}
 		}
 		//#endregion
@@ -151,7 +153,7 @@ async function init() {
 				fileIds.split(",").map((fileId) =>
 					os.api("drive/files/show", { fileId }).then(
 						(file) => {
-							files.push(file);
+							files.value.push(file);
 						},
 						() => {
 							console.error(`Failed to fetch a file ${fileId}`);
@@ -169,7 +171,7 @@ async function init() {
 		});
 	}
 
-	state = "writing";
+	state.value = "writing";
 }
 
 init();
@@ -183,9 +185,9 @@ function close(): void {
 	}, 100);
 }
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.share,
diff --git a/packages/client/src/pages/signup-complete.vue b/packages/client/src/pages/signup-complete.vue
index deb1f78461..9e8d03f282 100644
--- a/packages/client/src/pages/signup-complete.vue
+++ b/packages/client/src/pages/signup-complete.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from "vue";
+import { onMounted, computed } from "vue";
 import * as os from "@/os";
 import { login } from "@/account";
 import { i18n } from "@/i18n";
@@ -26,9 +26,9 @@ onMounted(async () => {
 	login(res.i, "/");
 });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.signup,
diff --git a/packages/client/src/pages/tag.vue b/packages/client/src/pages/tag.vue
index e9a1792a03..b4816b967c 100644
--- a/packages/client/src/pages/tag.vue
+++ b/packages/client/src/pages/tag.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, onMounted } from "vue";
+import { computed, watch, onMounted, ref } from "vue";
 import { Virtual } from "swiper/modules";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import XNotes from "@/components/MkNotes.vue";
@@ -74,12 +74,12 @@ const usersPagination = {
 };
 
 const tabs = ["notes", "users"];
-let tab = $ref(tabs[0]);
-watch($$(tab), () => syncSlide(tabs.indexOf(tab)));
+let tab = ref(tabs[0]);
+watch(tab, () => syncSlide(tabs.indexOf(tab.value)));
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => [
+const headerTabs = computed(() => [
 	{
 		key: "notes",
 		icon: "ph-note ph-bold ph-lg",
@@ -96,11 +96,11 @@ let swiperRef = null;
 
 function setSwiperRef(swiper) {
 	swiperRef = swiper;
-	syncSlide(tabs.indexOf(tab));
+	syncSlide(tabs.indexOf(tab.value));
 }
 
 function onSlideChange() {
-	tab = tabs[swiperRef.activeIndex];
+	tab.value = tabs[swiperRef.activeIndex];
 }
 
 function syncSlide(index) {
diff --git a/packages/client/src/pages/theme-editor.vue b/packages/client/src/pages/theme-editor.vue
index cec2cb980b..d30c769627 100644
--- a/packages/client/src/pages/theme-editor.vue
+++ b/packages/client/src/pages/theme-editor.vue
@@ -143,7 +143,7 @@
 </template>
 
 <script lang="ts" setup>
-import { watch } from "vue";
+import { watch, ref, computed } from "vue";
 import { toUnicode } from "punycode/";
 import tinycolor from "tinycolor2";
 import { v4 as uuid } from "uuid";
@@ -238,62 +238,63 @@ const fgColors = [
 	},
 ];
 
-let theme = $ref<Partial<Theme>>({
+let theme = ref<Partial<Theme>>({
 	base: "light",
 	props: lightTheme.props,
 });
-let description = $ref<string | null>(null);
-let themeCode = $ref<string | null>(null);
-let changed = $ref(false);
+let description = ref<string | null>(null);
+let themeCode = ref<string | null>(null);
+let changed = ref(false);
 
-useLeaveGuard($$(changed));
+useLeaveGuard(changed);
 
 function showPreview() {
 	os.pageWindow("/preview");
 }
 
 function setBgColor(color: (typeof bgColors)[number]) {
-	if (theme.base !== color.kind) {
+	if (theme.value.base !== color.kind) {
 		const base = color.kind === "dark" ? darkTheme : lightTheme;
 		for (const prop of Object.keys(base.props)) {
 			if (prop === "accent") continue;
 			if (prop === "fg") continue;
-			theme.props[prop] = base.props[prop];
+			theme.value.props[prop] = base.props[prop];
 		}
 	}
-	theme.base = color.kind;
-	theme.props.bg = color.color;
+	theme.value.base = color.kind;
+	theme.value.props.bg = color.color;
 
-	if (theme.props.fg) {
+	if (theme.value.props.fg) {
 		const matchedFgColor = fgColors.find((x) =>
 			[
 				tinycolor(x.forLight).toRgbString(),
 				tinycolor(x.forDark).toRgbString(),
-			].includes(tinycolor(theme.props.fg).toRgbString()),
+			].includes(tinycolor(theme.value.props.fg).toRgbString()),
 		);
 		if (matchedFgColor) setFgColor(matchedFgColor);
 	}
 }
 
 function setAccentColor(color) {
-	theme.props.accent = color;
+	theme.value.props.accent = color;
 }
 
 function setFgColor(color) {
-	theme.props.fg = theme.base === "light" ? color.forLight : color.forDark;
+	theme.value.props.fg =
+		theme.value.base === "light" ? color.forLight : color.forDark;
 }
 
 function apply() {
-	themeCode = JSON5.stringify(theme, null, "\t");
-	applyTheme(theme, false);
-	changed = true;
+	themeCode.value = JSON5.stringify(theme.value, null, "\t");
+	applyTheme(theme.value, false);
+	changed.value = true;
 }
 
 function applyThemeCode() {
 	let parsed;
 
 	try {
-		parsed = JSON5.parse(themeCode);
+		parsed = JSON5.parse(themeCode.value);
 	} catch (err) {
 		os.alert({
 			type: "error",
@@ -302,7 +303,7 @@ function applyThemeCode() {
 		return;
 	}
 
-	theme = parsed;
+	theme.value = parsed;
 }
 
 async function saveAs() {
@@ -312,27 +313,27 @@ async function saveAs() {
 	});
 	if (canceled) return;
 
-	theme.id = uuid();
-	theme.name = name;
-	theme.author = `@${$i.username}@${toUnicode(host)}`;
-	if (description) theme.desc = description;
-	await addTheme(theme);
-	applyTheme(theme);
+	theme.value.id = uuid();
+	theme.value.name = name;
+	theme.value.author = `@${$i.username}@${toUnicode(host)}`;
+	if (description.value) theme.value.desc = description.value;
+	await addTheme(theme.value);
+	applyTheme(theme.value);
 	if (defaultStore.state.darkMode) {
-		ColdDeviceStorage.set("darkTheme", theme);
+		ColdDeviceStorage.set("darkTheme", theme.value);
 	} else {
-		ColdDeviceStorage.set("lightTheme", theme);
+		ColdDeviceStorage.set("lightTheme", theme.value);
 	}
-	changed = false;
+	changed.value = false;
 	os.alert({
 		type: "success",
-		text: i18n.t("_theme.installed", { name: theme.name }),
+		text: i18n.t("_theme.installed", { name: theme.value.name }),
 	});
 }
 
-watch($$(theme), apply, { deep: true });
+watch(theme, apply, { deep: true });
 
-const headerActions = $computed(() => [
+const headerActions = computed(() => [
 	{
 		asFullButton: true,
 		icon: "ph-eye ph-bold ph-lg",
@@ -347,7 +348,7 @@ const headerActions = $computed(() => [
 	},
 ]);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: i18n.ts.themeEditor,
diff --git a/packages/client/src/pages/timeline.vue b/packages/client/src/pages/timeline.vue
index 930a9635af..bcf8853600 100644
--- a/packages/client/src/pages/timeline.vue
+++ b/packages/client/src/pages/timeline.vue
@@ -121,10 +121,10 @@ window.addEventListener("resize", () => {
 		deviceKind === "smartphone" || window.innerWidth <= MOBILE_THRESHOLD;
 });
 
-const tlComponent = $ref<InstanceType<typeof XTimeline>>();
-const rootEl = $ref<HTMLElement>();
+const tlComponent = ref<InstanceType<typeof XTimeline>>();
+const rootEl = ref<HTMLElement>();
 
-const src = $computed({
+const src = computed({
 	get: () => defaultStore.reactiveState.tl.value.src,
 	set: (x) => {
 		saveSrc(x);
@@ -193,14 +193,14 @@ async function timetravel(): Promise<void> {
 	});
 	if (canceled) return;
 
-	tlComponent.timetravel(date);
+	tlComponent.value.timetravel(date);
 }
 
 function focus(): void {
-	tlComponent.focus();
+	tlComponent.value.focus();
 }
 
-const headerActions = $computed(() => [
+const headerActions = computed(() => [
 	{
 		icon: "ph-list-bullets ph-bold ph-lg",
 		title: i18n.ts.lists,
@@ -222,7 +222,7 @@ const headerActions = $computed(() => [
 }*/,
 ]);
 
-const headerTabs = $computed(() => [
+const headerTabs = computed(() => [
 	{
 		key: "home",
 		title: i18n.ts._timelines.home,
@@ -275,13 +275,13 @@ definePageMetadata(
 	computed(() => ({
 		title: i18n.ts.timeline,
 		icon:
-			src === "local"
+			src.value === "local"
 				? "ph-users ph-bold ph-lg"
-				: src === "social"
+				: src.value === "social"
 				? "ph-handshake ph-bold ph-lg"
-				: src === "recommended"
+				: src.value === "recommended"
 				? "ph-thumbs-up ph-bold ph-lg"
-				: src === "global"
+				: src.value === "global"
 				? "ph-planet ph-bold ph-lg"
 				: "ph-house ph-bold ph-lg",
 	})),
@@ -291,7 +291,7 @@ let swiperRef: any = null;
 
 function setSwiperRef(swiper) {
 	swiperRef = swiper;
-	syncSlide(timelines.indexOf(src));
+	syncSlide(timelines.indexOf(src.value));
 }
 
 function onSlideChange() {
diff --git a/packages/client/src/pages/user-info.vue b/packages/client/src/pages/user-info.vue
index 9e19996a7d..fb6c601ba5 100644
--- a/packages/client/src/pages/user-info.vue
+++ b/packages/client/src/pages/user-info.vue
@@ -357,7 +357,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch } from "vue";
+import { computed, watch, ref } from "vue";
 import * as misskey from "firefish-js";
 import MkChart from "@/components/MkChart.vue";
 import MkObjectView from "@/components/MkObjectView.vue";
@@ -388,18 +388,18 @@ const props = defineProps<{
 	userId: string;
 }>();
 
-let tab = $ref("overview");
-let chartSrc = $ref("per-user-notes");
-let user = $ref<null | misskey.entities.UserDetailed>();
-let init = $ref<ReturnType<typeof createFetcher>>();
-let info = $ref();
-let ips = $ref(null);
-let ap = $ref(null);
-let moderator = $ref(false);
-let silenced = $ref(false);
-let suspended = $ref(false);
-let driveCapacityOverrideMb: number | null = $ref(0);
-let moderationNote = $ref("");
+let tab = ref("overview");
+let chartSrc = ref("per-user-notes");
+let user = ref<null | misskey.entities.UserDetailed>();
+let init = ref<ReturnType<typeof createFetcher>>();
+let info = ref();
+let ips = ref(null);
+let ap = ref(null);
+let moderator = ref(false);
+let silenced = ref(false);
+let suspended = ref(false);
+let driveCapacityOverrideMb: number | null = ref(0);
+let moderationNote = ref("");
 const filesPagination = {
 	endpoint: "admin/drive/files" as const,
 	limit: 10,
@@ -424,19 +424,20 @@ function createFetcher() {
 					  })
 					: Promise.resolve(null),
 			]).then(([_user, _info, _ips]) => {
-				user = _user;
-				info = _info;
-				ips = _ips;
-				moderator = info.isModerator;
-				silenced = info.isSilenced;
-				suspended = info.isSuspended;
-				driveCapacityOverrideMb = user.driveCapacityOverrideMb;
-				moderationNote = info.moderationNote;
+				user.value = _user;
+				info.value = _info;
+				ips.value = _ips;
+				moderator.value = info.value.isModerator;
+				silenced.value = info.value.isSilenced;
+				suspended.value = info.value.isSuspended;
+				driveCapacityOverrideMb.value =
+					user.value.driveCapacityOverrideMb;
+				moderationNote.value = info.value.moderationNote;
 
-				watch($$(moderationNote), async () => {
+				watch(moderationNote, async () => {
 					await os.api("admin/update-user-note", {
-						userId: user.id,
-						text: moderationNote,
+						userId: user.value.id,
+						text: moderationNote.value,
 					});
 					await refreshUser();
 				});
@@ -448,25 +449,25 @@ function createFetcher() {
 					userId: props.userId,
 				})
 				.then((res) => {
-					user = res;
+					user.value = res;
 				});
 	}
 }
 
 function refreshUser() {
-	init = createFetcher();
+	init.value = createFetcher();
 }
 
 async function updateRemoteUser() {
 	await os.apiWithDialog("federation/update-remote-user", {
-		userId: user.id,
+		userId: user.value.id,
 	});
 	refreshUser();
 }
 
 async function resetPassword() {
 	const { password } = await os.api("admin/reset-password", {
-		userId: user.id,
+		userId: user.value.id,
 	});
 
 	os.alert({
@@ -481,10 +482,10 @@ async function toggleSilence(v) {
 		text: v ? i18n.ts.silenceConfirm : i18n.ts.unsilenceConfirm,
 	});
 	if (confirm.canceled) {
-		silenced = !v;
+		silenced.value = !v;
 	} else {
 		await os.api(v ? "admin/silence-user" : "admin/unsilence-user", {
-			userId: user.id,
+			userId: user.value.id,
 		});
 		await refreshUser();
 	}
@@ -496,10 +497,10 @@ async function toggleSuspend(v) {
 		text: v ? i18n.ts.suspendConfirm : i18n.ts.unsuspendConfirm,
 	});
 	if (confirm.canceled) {
-		suspended = !v;
+		suspended.value = !v;
 	} else {
 		await os.api(v ? "admin/suspend-user" : "admin/unsuspend-user", {
-			userId: user.id,
+			userId: user.value.id,
 		});
 		await refreshUser();
 	}
@@ -507,7 +508,7 @@ async function toggleSuspend(v) {
 
 async function toggleModerator(v) {
 	await os.api(v ? "admin/moderators/add" : "admin/moderators/remove", {
-		userId: user.id,
+		userId: user.value.id,
 	});
 	await refreshUser();
 }
@@ -518,7 +519,7 @@ async function sendModMail() {
 	});
 	if (canceled) return;
 	await os.apiWithDialog("admin/send-mod-mail", {
-		userId: user.id,
+		userId: user.value.id,
 		comment: result,
 	});
 }
@@ -530,7 +531,9 @@ async function deleteAllFiles() {
 	});
 	if (confirm.canceled) return;
 	const process = async () => {
-		await os.api("admin/delete-all-files-of-a-user", { userId: user.id });
+		await os.api("admin/delete-all-files-of-a-user", {
+			userId: user.value.id,
+		});
 		os.success();
 	};
 	await process().catch((err) => {
@@ -543,13 +546,13 @@ async function deleteAllFiles() {
 }
 
 async function applyDriveCapacityOverride() {
-	let driveCapOrMb = driveCapacityOverrideMb;
-	if (driveCapacityOverrideMb && driveCapacityOverrideMb < 0) {
+	let driveCapOrMb = driveCapacityOverrideMb.value;
+	if (driveCapacityOverrideMb.value && driveCapacityOverrideMb.value < 0) {
 		driveCapOrMb = null;
 	}
 	try {
 		await os.apiWithDialog("admin/drive-capacity-override", {
-			userId: user.id,
+			userId: user.value.id,
 			overrideMb: driveCapOrMb,
 		});
 		await refreshUser();
@@ -569,13 +572,13 @@ async function delete2fa() {
 	if (confirm.canceled) return;
 
 	const typed = await os.inputText({
-		text: i18n.t("typeToConfirm", { x: user?.username }),
+		text: i18n.t("typeToConfirm", { x: user.value?.username }),
 	});
 	if (typed.canceled) return;
 
-	if (typed.result === user?.username) {
+	if (typed.result === user.value?.username) {
 		await os.apiWithDialog("admin/delete-2fa", {
-			userId: user.id,
+			userId: user.value.id,
 		});
 	} else {
 		os.alert({
@@ -593,13 +596,13 @@ async function deletePasskeys() {
 	if (confirm.canceled) return;
 
 	const typed = await os.inputText({
-		text: i18n.t("typeToConfirm", { x: user?.username }),
+		text: i18n.t("typeToConfirm", { x: user.value?.username }),
 	});
 	if (typed.canceled) return;
 
-	if (typed.result === user?.username) {
+	if (typed.result === user.value?.username) {
 		await os.apiWithDialog("admin/delete-passkeys", {
-			userId: user.id,
+			userId: user.value.id,
 		});
 	} else {
 		os.alert({
@@ -617,13 +620,13 @@ async function deleteAccount() {
 	if (confirm.canceled) return;
 
 	const typed = await os.inputText({
-		text: i18n.t("typeToConfirm", { x: user?.username }),
+		text: i18n.t("typeToConfirm", { x: user.value?.username }),
 	});
 	if (typed.canceled) return;
 
-	if (typed.result === user?.username) {
+	if (typed.result === user.value?.username) {
 		await os.apiWithDialog("admin/delete-account", {
-			userId: user.id,
+			userId: user.value.id,
 		});
 	} else {
 		os.alert({
@@ -636,24 +639,24 @@ async function deleteAccount() {
 watch(
 	() => props.userId,
 	() => {
-		init = createFetcher();
+		init.value = createFetcher();
 	},
 	{
 		immediate: true,
 	},
 );
 
-watch($$(user), () => {
+watch(user, () => {
 	os.api("ap/get", {
-		uri: user.uri ?? `${url}/users/${user.id}`,
+		uri: user.value.uri ?? `${url}/users/${user.value.id}`,
 	}).then((res) => {
-		ap = res;
+		ap.value = res;
 	});
 });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() =>
+const headerTabs = computed(() =>
 	[
 		{
 			key: "overview",
@@ -682,7 +685,7 @@ const headerTabs = $computed(() =>
 
 definePageMetadata(
 	computed(() => ({
-		title: user ? acct(user) : i18n.ts.userInfo,
+		title: user.value ? acct(user.value) : i18n.ts.userInfo,
 		icon: "ph-info ph-bold ph-lg",
 	})),
 );
diff --git a/packages/client/src/pages/user-list-timeline.vue b/packages/client/src/pages/user-list-timeline.vue
index b6e1127ebe..5a31e342a7 100644
--- a/packages/client/src/pages/user-list-timeline.vue
+++ b/packages/client/src/pages/user-list-timeline.vue
@@ -19,7 +19,7 @@
 </template>
 
 <script lang="ts" setup>
-import { computed, watch, inject } from "vue";
+import { computed, watch, inject, ref } from "vue";
 import XTimeline from "@/components/MkTimeline.vue";
 import * as os from "@/os";
 import { useRouter } from "@/router";
@@ -32,14 +32,14 @@ const props = defineProps<{
 	listId: string;
 }>();
 
-let list = $ref(null);
-let tlEl = $ref<InstanceType<typeof XTimeline>>();
-let rootEl = $ref<HTMLElement>();
+let list = ref(null);
+let tlEl = ref<InstanceType<typeof XTimeline>>();
+let rootEl = ref<HTMLElement>();
 
 watch(
 	() => props.listId,
 	async () => {
-		list = await os.api("users/lists/show", {
+		list.value = await os.api("users/lists/show", {
 			listId: props.listId,
 		});
 	},
@@ -56,11 +56,11 @@ async function timetravel() {
 	});
 	if (canceled) return;
 
-	tlEl.timetravel(date);
+	tlEl.value.timetravel(date);
 }
 
-const headerActions = $computed(() =>
-	list
+const headerActions = computed(() =>
+	list.value
 		? [
 				{
 					icon: "ph-calendar-blank ph-bold ph-lg",
@@ -76,13 +76,13 @@ const headerActions = $computed(() =>
 		: [],
 );
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata(
 	computed(() =>
-		list
+		list.value
 			? {
-					title: list.name,
+					title: list.value.name,
 					icon: "ph-list-bullets ph-bold ph-lg",
 			  }
 			: null,
diff --git a/packages/client/src/pages/user/followers.vue b/packages/client/src/pages/user/followers.vue
index de823f6d45..9448f2fb43 100644
--- a/packages/client/src/pages/user/followers.vue
+++ b/packages/client/src/pages/user/followers.vue
@@ -16,14 +16,7 @@
 </template>
 
 <script lang="ts" setup>
-import {
-	defineAsyncComponent,
-	computed,
-	inject,
-	onMounted,
-	onUnmounted,
-	watch,
-} from "vue";
+import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch, , ref } from 'vue';
 import * as Acct from "firefish-js/built/acct";
 import * as misskey from "firefish-js";
 import XFollowList from "./follow-list.vue";
@@ -38,18 +31,18 @@ const props = withDefaults(
 	{},
 );
 
-let user = $ref<null | misskey.entities.UserDetailed>(null);
-let error = $ref(null);
+let user = ref<null | misskey.entities.UserDetailed>(null);
+let error = ref(null);
 
 function fetchUser(): void {
 	if (props.acct == null) return;
-	user = null;
+	user.value = null;
 	os.api("users/show", Acct.parse(props.acct))
 		.then((u) => {
-			user = u;
+			user.value = u;
 		})
 		.catch((err) => {
-			error = err;
+			error.value = err;
 		});
 }
 
@@ -57,21 +50,21 @@ watch(() => props.acct, fetchUser, {
 	immediate: true,
 });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata(
 	computed(() =>
-		user
+		user.value
 			? {
 					icon: "ph-user ph-bold ph-lg",
-					title: user.name
-						? `${user.name} (@${user.username})`
-						: `@${user.username}`,
+					title: user.value.name
+						? `${user.value.name} (@${user.value.username})`
+						: `@${user.value.username}`,
 					subtitle: i18n.ts.followers,
-					userName: user,
-					avatar: user,
+					userName: user.value,
+					avatar: user.value,
 			  }
 			: null,
 	),
diff --git a/packages/client/src/pages/user/following.vue b/packages/client/src/pages/user/following.vue
index abd7c518c6..1b652c747a 100644
--- a/packages/client/src/pages/user/following.vue
+++ b/packages/client/src/pages/user/following.vue
@@ -16,14 +16,7 @@
 </template>
 
 <script lang="ts" setup>
-import {
-	defineAsyncComponent,
-	computed,
-	inject,
-	onMounted,
-	onUnmounted,
-	watch,
-} from "vue";
+import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch, , ref } from 'vue';
 import * as Acct from "firefish-js/built/acct";
 import * as misskey from "firefish-js";
 import XFollowList from "./follow-list.vue";
@@ -38,18 +31,18 @@ const props = withDefaults(
 	{},
 );
 
-let user = $ref<null | misskey.entities.UserDetailed>(null);
-let error = $ref(null);
+let user = ref<null | misskey.entities.UserDetailed>(null);
+let error = ref(null);
 
 function fetchUser(): void {
 	if (props.acct == null) return;
-	user = null;
+	user.value = null;
 	os.api("users/show", Acct.parse(props.acct))
 		.then((u) => {
-			user = u;
+			user.value = u;
 		})
 		.catch((err) => {
-			error = err;
+			error.value = err;
 		});
 }
 
@@ -57,21 +50,21 @@ watch(() => props.acct, fetchUser, {
 	immediate: true,
 });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata(
 	computed(() =>
-		user
+		user.value
 			? {
 					icon: "ph-user ph-bold ph-lg",
-					title: user.name
-						? `${user.name} (@${user.username})`
-						: `@${user.username}`,
+					title: user.value.name
+						? `${user.value.name} (@${user.value.username})`
+						: `@${user.value.username}`,
 					subtitle: i18n.ts.following,
-					userName: user,
-					avatar: user,
+					userName: user.value,
+					avatar: user.value,
 			  }
 			: null,
 	),
diff --git a/packages/client/src/pages/user/home.vue b/packages/client/src/pages/user/home.vue
index 5250a3c3d8..5aaa886fa8 100644
--- a/packages/client/src/pages/user/home.vue
+++ b/packages/client/src/pages/user/home.vue
@@ -379,7 +379,13 @@
 </template>
 
 <script lang="ts" setup>
-import { ref, defineAsyncComponent, onMounted, onUnmounted } from "vue";
+import {
+	ref,
+	defineAsyncComponent,
+	onMounted,
+	onUnmounted,
+	computed,
+} from "vue";
 import calcAge from "s-age";
 import cityTimezones from "city-timezones";
 import XUserTimeline from "./index.timeline.vue";
@@ -410,17 +416,17 @@ const props = withDefaults(
 	{},
 );
 
-let parallaxAnimationId = $ref<null | number>(null);
-let narrow = $ref<null | boolean>(null);
-let rootEl = $ref<null | HTMLElement>(null);
-let bannerEl = $ref<null | HTMLElement>(null);
+let parallaxAnimationId = ref<null | number>(null);
+let narrow = ref<null | boolean>(null);
+let rootEl = ref<null | HTMLElement>(null);
+let bannerEl = ref<null | HTMLElement>(null);
 let patrons = ref([]);
 
-const age = $computed(() => {
+const age = computed(() => {
 	return calcAge(props.user.birthday);
 });
 
-const timeForThem = $computed(() => {
+const timeForThem = computed(() => {
 	const maybeCityNames = [
 		props.user.location!,
 		props.user
@@ -464,15 +470,15 @@ const patronsResp = await os.api("patrons");
 patrons.value = patronsResp.patrons;
 
 function parallaxLoop() {
-	parallaxAnimationId = window.requestAnimationFrame(parallaxLoop);
+	parallaxAnimationId.value = window.requestAnimationFrame(parallaxLoop);
 	parallax();
 }
 
 function parallax() {
-	const banner = bannerEl as any;
+	const banner = bannerEl.value as any;
 	if (banner == null) return;
 
-	const top = getScrollPosition(rootEl);
+	const top = getScrollPosition(rootEl.value);
 
 	if (top < 0) return;
 
@@ -483,12 +489,12 @@ function parallax() {
 
 onMounted(() => {
 	window.requestAnimationFrame(parallaxLoop);
-	narrow = rootEl!.clientWidth < 1000;
+	narrow.value = rootEl.value!.clientWidth < 1000;
 });
 
 onUnmounted(() => {
-	if (parallaxAnimationId) {
-		window.cancelAnimationFrame(parallaxAnimationId);
+	if (parallaxAnimationId.value) {
+		window.cancelAnimationFrame(parallaxAnimationId.value);
 	}
 });
 </script>
diff --git a/packages/client/src/pages/user/index.activity.vue b/packages/client/src/pages/user/index.activity.vue
index 92ecc8baea..48af5d82e7 100644
--- a/packages/client/src/pages/user/index.activity.vue
+++ b/packages/client/src/pages/user/index.activity.vue
@@ -29,6 +29,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import {} from "vue";
 import * as misskey from "firefish-js";
 import MkContainer from "@/components/MkContainer.vue";
@@ -46,7 +48,7 @@ const props = withDefaults(
 	},
 );
 
-let chartSrc = $ref("per-user-notes");
+let chartSrc = ref("per-user-notes");
 
 function showMenu(ev: MouseEvent) {
 	os.popupMenu(
@@ -55,7 +57,7 @@ function showMenu(ev: MouseEvent) {
 				text: i18n.ts.notes,
 				active: true,
 				action: () => {
-					chartSrc = "per-user-notes";
+					chartSrc.value = "per-user-notes";
 				},
 			} /*, {
 		text: i18n.ts.following,
diff --git a/packages/client/src/pages/user/index.photos.vue b/packages/client/src/pages/user/index.photos.vue
index 256547323b..4f66962c47 100644
--- a/packages/client/src/pages/user/index.photos.vue
+++ b/packages/client/src/pages/user/index.photos.vue
@@ -28,7 +28,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import * as misskey from "firefish-js";
 import { getStaticImageUrl } from "@/scripts/get-static-image-url";
 import { notePage } from "@/filters/note";
@@ -42,8 +42,8 @@ const props = defineProps<{
 	user: misskey.entities.UserDetailed;
 }>();
 
-let fetching = $ref(true);
-let images = $ref<
+let fetching = ref(true);
+let images = ref<
 	{
 		note: misskey.entities.Note;
 		file: misskey.entities.DriveFile;
@@ -73,13 +73,13 @@ onMounted(() => {
 	}).then((notes) => {
 		for (const note of notes) {
 			for (const file of note.files) {
-				images.push({
+				images.value.push({
 					note,
 					file,
 				});
 			}
 		}
-		fetching = false;
+		fetching.value = false;
 	});
 });
 </script>
diff --git a/packages/client/src/pages/user/index.vue b/packages/client/src/pages/user/index.vue
index e6ba471d60..3f9a1657c1 100644
--- a/packages/client/src/pages/user/index.vue
+++ b/packages/client/src/pages/user/index.vue
@@ -29,7 +29,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, watch } from "vue";
+import { defineAsyncComponent, computed, watch, ref } from "vue";
 import calcAge from "s-age";
 import * as Acct from "firefish-js/built/acct";
 import type * as misskey from "firefish-js";
@@ -60,19 +60,19 @@ const props = withDefaults(
 
 const router = useRouter();
 
-let tab = $ref(props.page);
-let user = $ref<null | misskey.entities.UserDetailed>(null);
-let error = $ref(null);
+let tab = ref(props.page);
+let user = ref<null | misskey.entities.UserDetailed>(null);
+let error = ref(null);
 
 function fetchUser(): void {
 	if (props.acct == null) return;
-	user = null;
+	user.value = null;
 	os.api("users/show", Acct.parse(props.acct))
 		.then((u) => {
-			user = u;
+			user.value = u;
 		})
 		.catch((err) => {
-			error = err;
+			error.value = err;
 		});
 }
 
@@ -80,17 +80,18 @@ watch(() => props.acct, fetchUser, {
 	immediate: true,
 });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() =>
-	user
+const headerTabs = computed(() =>
+	user.value
 		? [
 				{
 					key: "home",
 					title: i18n.ts.overview,
 					icon: "ph-user ph-bold ph-lg",
 				},
-				...(($i && $i.id === user.id) || user.publicReactions
+				...(($i && $i.id === user.value.id) ||
+				user.value.publicReactions
 					? [
 							{
 								key: "reactions",
@@ -99,7 +100,7 @@ const headerTabs = $computed(() =>
 							},
 					  ]
 					: []),
-				...(user.instance == null
+				...(user.value.instance == null
 					? [
 							{
 								key: "clips",
@@ -124,18 +125,18 @@ const headerTabs = $computed(() =>
 
 definePageMetadata(
 	computed(() =>
-		user
+		user.value
 			? {
 					icon: "ph-user ph-bold ph-lg",
-					title: user.name
-						? `${user.name} (@${user.username})`
-						: `@${user.username}`,
-					subtitle: `@${getAcct(user)}`,
-					userName: user,
-					avatar: user,
-					path: `/@${user.username}`,
+					title: user.value.name
+						? `${user.value.name} (@${user.value.username})`
+						: `@${user.value.username}`,
+					subtitle: `@${getAcct(user.value)}`,
+					userName: user.value,
+					avatar: user.value,
+					path: `/@${user.value.username}`,
 					share: {
-						title: user.name,
+						title: user.value.name,
 					},
 			  }
 			: null,
diff --git a/packages/client/src/pages/verify-email.vue b/packages/client/src/pages/verify-email.vue
index b5830aec48..0b9f256083 100644
--- a/packages/client/src/pages/verify-email.vue
+++ b/packages/client/src/pages/verify-email.vue
@@ -5,7 +5,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from "vue";
+import { onMounted, computed } from "vue";
 import * as os from "@/os";
 import { i18n } from "@/i18n";
 import { definePageMetadata } from "@/scripts/page-metadata";
@@ -28,9 +28,9 @@ onMounted(async () => {
 	router.push("/");
 });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata({
 	title: "Verify email",
diff --git a/packages/client/src/pages/welcome.entrance.a.vue b/packages/client/src/pages/welcome.entrance.a.vue
index 7267c0e9fc..0fbfd064b1 100644
--- a/packages/client/src/pages/welcome.entrance.a.vue
+++ b/packages/client/src/pages/welcome.entrance.a.vue
@@ -100,6 +100,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import {} from "vue";
 import { toUnicode } from "punycode/";
 import XTimeline from "./welcome.timeline.vue";
@@ -114,36 +116,36 @@ import * as os from "@/os";
 import number from "@/filters/number";
 import { i18n } from "@/i18n";
 
-let meta = $ref();
-let stats = $ref();
-let tags = $ref();
-let onlineUsersCount = $ref();
-let instances = $ref();
+let meta = ref();
+let stats = ref();
+let tags = ref();
+let onlineUsersCount = ref();
+let instances = ref();
 
 os.api("meta", { detail: true }).then((_meta) => {
-	meta = _meta;
+	meta.value = _meta;
 });
 
 os.api("stats").then((_stats) => {
-	stats = _stats;
+	stats.value = _stats;
 });
 
 os.api("get-online-users-count").then((res) => {
-	onlineUsersCount = res.count;
+	onlineUsersCount.value = res.count;
 });
 
 os.api("hashtags/list", {
 	sort: "+mentionedLocalUsers",
 	limit: 8,
 }).then((_tags) => {
-	tags = _tags;
+	tags.value = _tags;
 });
 
 os.api("federation/instances", {
 	sort: "+pubSub",
 	limit: 20,
 }).then((_instances) => {
-	instances = _instances;
+	instances.value = _instances;
 });
 
 function signin() {
diff --git a/packages/client/src/pages/welcome.setup.vue b/packages/client/src/pages/welcome.setup.vue
index 739e29a351..ce8601c7d1 100644
--- a/packages/client/src/pages/welcome.setup.vue
+++ b/packages/client/src/pages/welcome.setup.vue
@@ -42,6 +42,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import {} from "vue";
 import MkButton from "@/components/MkButton.vue";
 import MkInput from "@/components/form/input.vue";
@@ -50,16 +52,16 @@ import * as os from "@/os";
 import { login } from "@/account";
 import { i18n } from "@/i18n";
 
-let username = $ref("");
-let password = $ref("");
-let submitting = $ref(false);
+let username = ref("");
+let password = ref("");
+let submitting = ref(false);
 
 function submit() {
-	if (submitting) return;
-	submitting = true;
+	if (submitting.value) return;
+	submitting.value = true;
 	os.api("admin/accounts/create", {
-		username: username,
-		password: password,
+		username: username.value,
+		password: password.value,
 	})
 		.then((res) => {
 			os.api("admin/accounts/hosted").then((res) => {
@@ -74,7 +76,7 @@ function submit() {
 			return login(res?.token);
 		})
 		.catch(() => {
-			submitting = false;
+			submitting.value = false;
 			os.alert({
 				type: "error",
 				text: i18n.ts.somethingHappened,
diff --git a/packages/client/src/pages/welcome.vue b/packages/client/src/pages/welcome.vue
index 2b66a91686..976b6c0376 100644
--- a/packages/client/src/pages/welcome.vue
+++ b/packages/client/src/pages/welcome.vue
@@ -6,22 +6,22 @@
 </template>
 
 <script lang="ts" setup>
-import { computed } from "vue";
+import { computed, ref } from "vue";
 import XSetup from "./welcome.setup.vue";
 import XEntrance from "./welcome.entrance.a.vue";
 import { instanceName } from "@/config";
 import * as os from "@/os";
 import { definePageMetadata } from "@/scripts/page-metadata";
 
-let meta = $ref(null);
+let meta = ref(null);
 
 os.api("meta", { detail: true }).then((res) => {
-	meta = res;
+	meta.value = res;
 });
 
-const headerActions = $computed(() => []);
+const headerActions = computed(() => []);
 
-const headerTabs = $computed(() => []);
+const headerTabs = computed(() => []);
 
 definePageMetadata(
 	computed(() => ({
diff --git a/packages/client/src/ui/_common_/navbar.vue b/packages/client/src/ui/_common_/navbar.vue
index c88bcc7ec9..0d7102a313 100644
--- a/packages/client/src/ui/_common_/navbar.vue
+++ b/packages/client/src/ui/_common_/navbar.vue
@@ -190,15 +190,15 @@ let noBotProtection =
 	!instance.enableHcaptcha &&
 	!instance.enableRecaptcha;
 let noEmailServer = !instance.enableEmail;
-let thereIsUnresolvedAbuseReport = $ref(false);
-let updateAvailable = $ref(false);
+let thereIsUnresolvedAbuseReport = ref(false);
+let updateAvailable = ref(false);
 
 if ($i?.isAdmin) {
 	os.api("admin/abuse-user-reports", {
 		state: "unresolved",
 		limit: 1,
 	}).then((reports) => {
-		if (reports?.length > 0) thereIsUnresolvedAbuseReport = true;
+		if (reports?.length > 0) thereIsUnresolvedAbuseReport.value = true;
 	});
 }
 
@@ -207,7 +207,7 @@ if (defaultStore.state.showAdminUpdates) {
 		const cleanRes = parseInt(res?.tag_name.replace(/[^0-9]/g, ""));
 		const cleanVersion = parseInt(version.replace(/[^0-9]/g, ""));
 		if (cleanRes > cleanVersion) {
-			updateAvailable = true;
+			updateAvailable.value = true;
 		}
 	});
 }
diff --git a/packages/client/src/ui/_common_/statusbar-federation.vue b/packages/client/src/ui/_common_/statusbar-federation.vue
index 170dade214..e7025eb27b 100644
--- a/packages/client/src/ui/_common_/statusbar-federation.vue
+++ b/packages/client/src/ui/_common_/statusbar-federation.vue
@@ -59,7 +59,7 @@ const props = defineProps<{
 
 const instances = ref<misskey.entities.Instance[]>([]);
 const fetching = ref(true);
-let key = $ref(0);
+let key = ref(0);
 
 const tick = () => {
 	os.api("federation/instances", {
@@ -68,7 +68,7 @@ const tick = () => {
 	}).then((res) => {
 		instances.value = res;
 		fetching.value = false;
-		key++;
+		key.value++;
 	});
 };
 
diff --git a/packages/client/src/ui/_common_/statusbar-rss.vue b/packages/client/src/ui/_common_/statusbar-rss.vue
index 606f3f1bd5..4797794e42 100644
--- a/packages/client/src/ui/_common_/statusbar-rss.vue
+++ b/packages/client/src/ui/_common_/statusbar-rss.vue
@@ -45,7 +45,7 @@ const props = defineProps<{
 
 const items = ref([]);
 const fetching = ref(true);
-let key = $ref(0);
+let key = ref(0);
 
 const tick = () => {
 	fetch(`/api/fetch-rss?url=${props.url}`, {}).then((res) => {
@@ -55,7 +55,7 @@ const tick = () => {
 			}
 			items.value = feed.items;
 			fetching.value = false;
-			key++;
+			key.value++;
 		});
 	});
 };
diff --git a/packages/client/src/ui/_common_/statusbar-user-list.vue b/packages/client/src/ui/_common_/statusbar-user-list.vue
index e7b6da913a..39e7ebba0e 100644
--- a/packages/client/src/ui/_common_/statusbar-user-list.vue
+++ b/packages/client/src/ui/_common_/statusbar-user-list.vue
@@ -53,7 +53,7 @@ const props = defineProps<{
 
 const notes = ref<misskey.entities.Note[]>([]);
 const fetching = ref(true);
-let key = $ref(0);
+let key = ref(0);
 
 const tick = () => {
 	if (props.userListId == null) return;
@@ -62,7 +62,7 @@ const tick = () => {
 	}).then((res) => {
 		notes.value = res;
 		fetching.value = false;
-		key++;
+		key.value++;
 	});
 };
 
diff --git a/packages/client/src/ui/_common_/stream-indicator.vue b/packages/client/src/ui/_common_/stream-indicator.vue
index a3d06295cf..4898e9ea84 100644
--- a/packages/client/src/ui/_common_/stream-indicator.vue
+++ b/packages/client/src/ui/_common_/stream-indicator.vue
@@ -18,18 +18,18 @@
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted } from "vue";
+import { onUnmounted, ref } from "vue";
 import { stream } from "@/stream";
 import { i18n } from "@/i18n";
 
-let hasDisconnected = $ref(false);
+let hasDisconnected = ref(false);
 
 function onDisconnected() {
-	hasDisconnected = true;
+	hasDisconnected.value = true;
 }
 
 function resetDisconnected() {
-	hasDisconnected = false;
+	hasDisconnected.value = false;
 }
 
 function reload() {
diff --git a/packages/client/src/ui/deck.vue b/packages/client/src/ui/deck.vue
index 6fdcfb28dd..71bb80b013 100644
--- a/packages/client/src/ui/deck.vue
+++ b/packages/client/src/ui/deck.vue
@@ -253,7 +253,7 @@ function showSettings() {
 	os.pageWindow("/settings/deck");
 }
 
-const columnsEl = $ref<HTMLElement>();
+const columnsEl = ref<HTMLElement>();
 
 const addColumn = async (ev) => {
 	const columns = [
@@ -299,7 +299,7 @@ const onContextmenu = (ev) => {
 
 function onWheel(ev: WheelEvent) {
 	if (ev.deltaX === 0) {
-		columnsEl.scrollLeft += ev.deltaY;
+		columnsEl.value.scrollLeft += ev.deltaY;
 	}
 }
 
diff --git a/packages/client/src/ui/deck/antenna-column.vue b/packages/client/src/ui/deck/antenna-column.vue
index 8e30017382..47b608be2a 100644
--- a/packages/client/src/ui/deck/antenna-column.vue
+++ b/packages/client/src/ui/deck/antenna-column.vue
@@ -21,7 +21,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import XColumn from "./column.vue";
 import type { Column } from "./deck-store";
 import { updateColumn } from "./deck-store";
@@ -39,7 +39,7 @@ const emit = defineEmits<{
 	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 
-const timeline = $ref<InstanceType<typeof XTimeline>>();
+const timeline = ref<InstanceType<typeof XTimeline>>();
 
 onMounted(() => {
 	if (props.column.antennaId == null) {
diff --git a/packages/client/src/ui/deck/channel-column.vue b/packages/client/src/ui/deck/channel-column.vue
index e53290d97c..1c1fdb6683 100644
--- a/packages/client/src/ui/deck/channel-column.vue
+++ b/packages/client/src/ui/deck/channel-column.vue
@@ -21,6 +21,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import {} from "vue";
 import XColumn from "./column.vue";
 import type { Column } from "./deck-store";
@@ -39,7 +41,7 @@ const emit = defineEmits<{
 	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 
-const timeline = $ref<InstanceType<typeof XTimeline>>();
+const timeline = ref<InstanceType<typeof XTimeline>>();
 
 if (props.column.channelId == null) {
 	setChannel();
diff --git a/packages/client/src/ui/deck/column.vue b/packages/client/src/ui/deck/column.vue
index d9262d1497..3e4d9d937f 100644
--- a/packages/client/src/ui/deck/column.vue
+++ b/packages/client/src/ui/deck/column.vue
@@ -56,7 +56,15 @@
 </template>
 
 <script lang="ts" setup>
-import { Ref, onBeforeUnmount, onMounted, provide, watch } from "vue";
+import {
+	Ref,
+	onBeforeUnmount,
+	onMounted,
+	provide,
+	watch,
+	ref,
+	computed,
+} from "vue";
 import type { Column } from "./deck-store";
 import {
 	deckStore,
@@ -99,21 +107,21 @@ const emit = defineEmits<{
 	(ev: "headerWheel", ctx: WheelEvent): void;
 }>();
 
-const body = $ref<HTMLDivElement>();
+const body = ref<HTMLDivElement>();
 
-let dragging = $ref(false);
-watch($$(dragging), (v) =>
+let dragging = ref(false);
+watch(dragging, (v) =>
 	os.deckGlobalEvents.emit(v ? "column.dragStart" : "column.dragEnd"),
 );
 
-let draghover = $ref(false),
-	dropready = $ref(false);
+let draghover = ref(false),
+	dropready = ref(false);
 
-const isMainColumn = $computed(() => props.column.type === "main");
-const active = $computed(() => props.column.active !== false);
-watch($$(active), (v) => emit("change-active-state", v));
+const isMainColumn = computed(() => props.column.type === "main");
+const active = computed(() => props.column.active !== false);
+watch(active, (v) => emit("change-active-state", v));
 
-const keymap = $computed(() => ({
+const keymap = computed(() => ({
 	"shift+up": () => emit("parent-focus", "up"),
 	"shift+down": () => emit("parent-focus", "down"),
 	"shift+left": () => emit("parent-focus", "left"),
@@ -131,11 +139,11 @@ onBeforeUnmount(() => {
 });
 
 function onOtherDragStart() {
-	dropready = true;
+	dropready.value = true;
 }
 
 function onOtherDragEnd() {
-	dropready = false;
+	dropready.value = false;
 }
 
 function toggleActive() {
@@ -255,7 +263,7 @@ function onContextmenu(ev: MouseEvent) {
 }
 
 function goTop() {
-	body.scrollTo({
+	body.value.scrollTo({
 		top: 0,
 		behavior: "smooth",
 	});
@@ -268,17 +276,17 @@ function onDragstart(ev) {
 	// Chromeのバグで、Dragstartハンドラ内ですぐにDOMを変更する(=リアクティブなプロパティを変更する)とDragが終了してしまう
 	// SEE: https://stackoverflow.com/questions/19639969/html5-dragend-event-firing-immediately
 	window.setTimeout(() => {
-		dragging = true;
+		dragging.value = true;
 	}, 10);
 }
 
 function onDragend(ev) {
-	dragging = false;
+	dragging.value = false;
 }
 
 function onDragover(ev) {
 	// 自分自身がドラッグされている場合
-	if (dragging) {
+	if (dragging.value) {
 		// 自分自身にはドロップさせない
 		ev.dataTransfer.dropEffect = "none";
 	} else {
@@ -287,16 +295,16 @@ function onDragover(ev) {
 
 		ev.dataTransfer.dropEffect = isDeckColumn ? "move" : "none";
 
-		if (isDeckColumn) draghover = true;
+		if (isDeckColumn) draghover.value = true;
 	}
 }
 
 function onDragleave() {
-	draghover = false;
+	draghover.value = false;
 }
 
 function onDrop(ev) {
-	draghover = false;
+	draghover.value = false;
 	os.deckGlobalEvents.emit("column.dragEnd");
 
 	const id = ev.dataTransfer.getData(_DATA_TRANSFER_DECK_COLUMN_);
diff --git a/packages/client/src/ui/deck/list-column.vue b/packages/client/src/ui/deck/list-column.vue
index 110258f0e1..e141dc1d1a 100644
--- a/packages/client/src/ui/deck/list-column.vue
+++ b/packages/client/src/ui/deck/list-column.vue
@@ -21,6 +21,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import {} from "vue";
 import XColumn from "./column.vue";
 import type { Column } from "./deck-store";
@@ -39,7 +41,7 @@ const emit = defineEmits<{
 	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 
-const timeline = $ref<InstanceType<typeof XTimeline>>();
+const timeline = ref<InstanceType<typeof XTimeline>>();
 
 if (props.column.listId == null) {
 	setList();
diff --git a/packages/client/src/ui/deck/main-column.vue b/packages/client/src/ui/deck/main-column.vue
index b284f90738..9c46cfb96c 100644
--- a/packages/client/src/ui/deck/main-column.vue
+++ b/packages/client/src/ui/deck/main-column.vue
@@ -21,7 +21,7 @@
 
 <script lang="ts" setup>
 import type { ComputedRef } from "vue";
-import { provide } from "vue";
+import { provide, ref } from "vue";
 import XColumn from "./column.vue";
 import type { Column } from "@/ui/deck/deck-store";
 import { deckStore } from "@/ui/deck/deck-store";
@@ -43,11 +43,11 @@ const emit = defineEmits<{
 	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 
-let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
+let pageMetadata = ref<null | ComputedRef<PageMetadata>>();
 
 provide("router", mainRouter);
 provideMetadataReceiver((info) => {
-	pageMetadata = info;
+	pageMetadata.value = info;
 });
 
 /*
diff --git a/packages/client/src/ui/deck/tl-column.vue b/packages/client/src/ui/deck/tl-column.vue
index c419b04690..19ea907431 100644
--- a/packages/client/src/ui/deck/tl-column.vue
+++ b/packages/client/src/ui/deck/tl-column.vue
@@ -44,7 +44,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import XColumn from "./column.vue";
 import type { Column } from "./deck-store";
 import { removeColumn, updateColumn } from "./deck-store";
@@ -64,15 +64,15 @@ const emit = defineEmits<{
 	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 
-let disabled = $ref(false),
-	indicated = $ref(false),
-	columnActive = $ref(true);
+let disabled = ref(false),
+	indicated = ref(false),
+	columnActive = ref(true);
 
 onMounted(() => {
 	if (props.column.tl == null) {
 		setType();
 	} else if ($i) {
-		disabled =
+		disabled.value =
 			!$i.isModerator &&
 			!$i.isAdmin &&
 			((instance.disableLocalTimeline &&
@@ -122,22 +122,22 @@ async function setType() {
 }
 
 function queueUpdated(q) {
-	if (columnActive) {
-		indicated = q !== 0;
+	if (columnActive.value) {
+		indicated.value = q !== 0;
 	}
 }
 
 function onNote() {
-	if (!columnActive) {
-		indicated = true;
+	if (!columnActive.value) {
+		indicated.value = true;
 	}
 }
 
 function onChangeActiveState(state) {
-	columnActive = state;
+	columnActive.value = state;
 
-	if (columnActive) {
-		indicated = false;
+	if (columnActive.value) {
+		indicated.value = false;
 	}
 }
 
diff --git a/packages/client/src/ui/deck/widgets-column.vue b/packages/client/src/ui/deck/widgets-column.vue
index 6f4090a9e5..364b3d0a51 100644
--- a/packages/client/src/ui/deck/widgets-column.vue
+++ b/packages/client/src/ui/deck/widgets-column.vue
@@ -32,6 +32,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import {} from "vue";
 import XColumn from "./column.vue";
 import type { Column } from "./deck-store";
@@ -53,7 +55,7 @@ const emit = defineEmits<{
 	(ev: "parent-focus", direction: "up" | "down" | "left" | "right"): void;
 }>();
 
-let edit = $ref(false);
+let edit = ref(false);
 
 function addWidget(widget) {
 	addColumnWidget(props.column.id, widget);
@@ -72,7 +74,7 @@ function updateWidgets(widgets) {
 }
 
 function func() {
-	edit = !edit;
+	edit.value = !edit.value;
 }
 
 const menu = [
diff --git a/packages/client/src/ui/universal.vue b/packages/client/src/ui/universal.vue
index 5fca264895..882f59ddc7 100644
--- a/packages/client/src/ui/universal.vue
+++ b/packages/client/src/ui/universal.vue
@@ -210,16 +210,16 @@ window.addEventListener("resize", () => {
 const buttonAnimIndex = ref(0);
 const drawerMenuShowing = ref(false);
 
-let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
-const widgetsEl = $ref<HTMLElement>();
-const postButton = $ref<HTMLElement>();
-const widgetsShowing = $ref(false);
+let pageMetadata = ref<null | ComputedRef<PageMetadata>>();
+const widgetsEl = ref<HTMLElement>();
+const postButton = ref<HTMLElement>();
+const widgetsShowing = ref(false);
 
 provide("router", mainRouter);
 provideMetadataReceiver((info) => {
-	pageMetadata = info;
-	if (pageMetadata.value) {
-		document.title = `${pageMetadata.value.title} | ${instanceName}`;
+	pageMetadata.value = info;
+	if (pageMetadata.value.value) {
+		document.title = `${pageMetadata.value.value.title} | ${instanceName}`;
 	}
 });
 
@@ -386,18 +386,18 @@ const attachSticky = (el: any) => {
 		"scroll",
 		() => {
 			requestAnimationFrame(() => {
-				widgetsEl.scrollTop += window.scrollY - lastScrollTop;
+				widgetsEl.value.scrollTop += window.scrollY - lastScrollTop;
 				lastScrollTop = window.scrollY;
 			});
 		},
 		{ passive: true },
 	);
-	widgetsEl.classList.add("hide-scrollbar");
-	widgetsEl.onmouseenter = () => {
+	widgetsEl.value.classList.add("hide-scrollbar");
+	widgetsEl.value.onmouseenter = () => {
 		if (document.documentElement.scrollHeight <= window.innerHeight) {
-			widgetsEl.classList.remove("hide-scrollbar");
+			widgetsEl.value.classList.remove("hide-scrollbar");
 		} else {
-			widgetsEl.classList.add("hide-scrollbar");
+			widgetsEl.value.classList.add("hide-scrollbar");
 		}
 	};
 };
diff --git a/packages/client/src/ui/universal.widgets.vue b/packages/client/src/ui/universal.widgets.vue
index dc6257cc34..076b0f78ff 100644
--- a/packages/client/src/ui/universal.widgets.vue
+++ b/packages/client/src/ui/universal.widgets.vue
@@ -30,7 +30,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onMounted } from "vue";
+import { onMounted, ref } from "vue";
 import XWidgets from "@/components/MkWidgets.vue";
 import { i18n } from "@/i18n";
 import { defaultStore } from "@/store";
@@ -39,11 +39,11 @@ const emit = defineEmits<{
 	(ev: "mounted", el: Element): void;
 }>();
 
-const editMode = $ref(false);
-const rootEl = $ref<HTMLDivElement>();
+const editMode = ref(false);
+const rootEl = ref<HTMLDivElement>();
 
 onMounted(() => {
-	emit("mounted", rootEl);
+	emit("mounted", rootEl.value);
 });
 
 function addWidget(widget) {
diff --git a/packages/client/src/ui/visitor/b.vue b/packages/client/src/ui/visitor/b.vue
index c1d090ef68..07ebaf69c5 100644
--- a/packages/client/src/ui/visitor/b.vue
+++ b/packages/client/src/ui/visitor/b.vue
@@ -72,7 +72,7 @@
 
 <script lang="ts" setup>
 import type { ComputedRef } from "vue";
-import { onMounted, provide } from "vue";
+import { onMounted, provide, ref, computed } from "vue";
 import XHeader from "./header.vue";
 import XKanban from "./kanban.vue";
 import { host, instanceName } from "@/config";
@@ -94,13 +94,13 @@ import { i18n } from "@/i18n";
 
 const DESKTOP_THRESHOLD = 1000;
 
-let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
+let pageMetadata = ref<null | ComputedRef<PageMetadata>>();
 
 provide("router", mainRouter);
 provideMetadataReceiver((info) => {
-	pageMetadata = info;
-	if (pageMetadata.value) {
-		document.title = `${pageMetadata.value.title} | ${instanceName}`;
+	pageMetadata.value = info;
+	if (pageMetadata.value.value) {
+		document.title = `${pageMetadata.value.value.title} | ${instanceName}`;
 	}
 });
 
@@ -112,12 +112,12 @@ const isTimelineAvailable =
 	!instance.disableLocalTimeline ||
 	!instance.disableRecommendedTimeline ||
 	!instance.disableGlobalTimeline;
-const showMenu = $ref(false);
-let isDesktop = $ref(window.innerWidth >= DESKTOP_THRESHOLD),
-	narrow = $ref(window.innerWidth < 1280),
-	meta = $ref();
+const showMenu = ref(false);
+let isDesktop = ref(window.innerWidth >= DESKTOP_THRESHOLD),
+	narrow = ref(window.innerWidth < 1280),
+	meta = ref();
 
-const keymap = $computed(() => {
+const keymap = computed(() => {
 	return {
 		d: () => {
 			if (ColdDeviceStorage.get("syncDeviceDarkMode")) return;
@@ -127,10 +127,10 @@ const keymap = $computed(() => {
 	};
 });
 
-const root = $computed(() => mainRouter.currentRoute.value.name === "index");
+const root = computed(() => mainRouter.currentRoute.value.name === "index");
 
 os.api("meta", { detail: true }).then((res) => {
-	meta = res;
+	meta.value = res;
 });
 
 function signin() {
@@ -156,11 +156,12 @@ function signup() {
 }
 
 onMounted(() => {
-	if (!isDesktop) {
+	if (!isDesktop.value) {
 		window.addEventListener(
 			"resize",
 			() => {
-				if (window.innerWidth >= DESKTOP_THRESHOLD) isDesktop = true;
+				if (window.innerWidth >= DESKTOP_THRESHOLD)
+					isDesktop.value = true;
 			},
 			{ passive: true },
 		);
@@ -168,7 +169,7 @@ onMounted(() => {
 });
 
 defineExpose({
-	showMenu: $$(showMenu),
+	showMenu: showMenu,
 });
 </script>
 
diff --git a/packages/client/src/ui/zen.vue b/packages/client/src/ui/zen.vue
index b171420d7d..d4e6dae87e 100644
--- a/packages/client/src/ui/zen.vue
+++ b/packages/client/src/ui/zen.vue
@@ -8,7 +8,7 @@
 
 <script lang="ts" setup>
 import type { ComputedRef } from "vue";
-import { provide } from "vue";
+import { provide, ref } from "vue";
 import XCommon from "./_common_/common.vue";
 import { mainRouter } from "@/router";
 import type { PageMetadata } from "@/scripts/page-metadata";
@@ -18,13 +18,13 @@ import {
 } from "@/scripts/page-metadata";
 import { instanceName } from "@/config";
 
-let pageMetadata = $ref<null | ComputedRef<PageMetadata>>();
+let pageMetadata = ref<null | ComputedRef<PageMetadata>>();
 
 provide("router", mainRouter);
 provideMetadataReceiver((info) => {
-	pageMetadata = info;
-	if (pageMetadata.value) {
-		document.title = `${pageMetadata.value.title} | ${instanceName}`;
+	pageMetadata.value = info;
+	if (pageMetadata.value.value) {
+		document.title = `${pageMetadata.value.value.title} | ${instanceName}`;
 	}
 });
 
diff --git a/packages/client/src/widgets/activity.chart.vue b/packages/client/src/widgets/activity.chart.vue
index 0f8eccb3cb..16f55238c3 100644
--- a/packages/client/src/widgets/activity.chart.vue
+++ b/packages/client/src/widgets/activity.chart.vue
@@ -32,18 +32,20 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 const props = defineProps<{
 	activity: any[];
 }>();
 
-const viewBoxX: number = $ref(147);
-const viewBoxY: number = $ref(60);
-let zoom: number = $ref(1),
-	pos: number = $ref(0),
-	pointsNote: any = $ref(null),
-	pointsReply: any = $ref(null),
-	pointsRenote: any = $ref(null),
-	pointsTotal: any = $ref(null);
+const viewBoxX: number = ref(147);
+const viewBoxY: number = ref(60);
+let zoom: number = ref(1),
+	pos: number = ref(0),
+	pointsNote: any = ref(null),
+	pointsReply: any = ref(null),
+	pointsRenote: any = ref(null),
+	pointsTotal: any = ref(null);
 
 function dragListen(fn) {
 	window.addEventListener("mousemove", fn);
@@ -60,18 +62,24 @@ function dragClear(fn) {
 function onMousedown(ev) {
 	const clickX = ev.clientX;
 	const clickY = ev.clientY;
-	const baseZoom = zoom;
-	const basePos = pos;
+	const baseZoom = zoom.value;
+	const basePos = pos.value;
 
 	// 動かした時
 	dragListen((me) => {
 		const moveLeft = me.clientX - clickX;
 		const moveTop = me.clientY - clickY;
 
-		zoom = Math.max(1, baseZoom + -moveTop / 20);
-		pos = Math.min(0, basePos + moveLeft);
-		if (pos < -((props.activity.length - 1) * zoom - viewBoxX))
-			pos = -((props.activity.length - 1) * zoom - viewBoxX);
+		zoom.value = Math.max(1, baseZoom + -moveTop / 20);
+		pos.value = Math.min(0, basePos + moveLeft);
+		if (
+			pos.value <
+			-((props.activity.length - 1) * zoom.value - viewBoxX.value)
+		)
+			pos.value = -(
+				(props.activity.length - 1) * zoom.value -
+				viewBoxX.value
+			);
 
 		render();
 	});
@@ -81,28 +89,36 @@ function render() {
 	const peak = Math.max(...props.activity.map((d) => d.total));
 	if (peak !== 0) {
 		const activity = props.activity.slice().reverse();
-		pointsNote = activity
+		pointsNote.value = activity
 			.map(
 				(d, i) =>
-					`${i * zoom + pos},${(1 - d.notes / peak) * viewBoxY}`,
+					`${i * zoom.value + pos.value},${
+						(1 - d.notes / peak) * viewBoxY.value
+					}`,
 			)
 			.join(" ");
-		pointsReply = activity
+		pointsReply.value = activity
 			.map(
 				(d, i) =>
-					`${i * zoom + pos},${(1 - d.replies / peak) * viewBoxY}`,
+					`${i * zoom.value + pos.value},${
+						(1 - d.replies / peak) * viewBoxY.value
+					}`,
 			)
 			.join(" ");
-		pointsRenote = activity
+		pointsRenote.value = activity
 			.map(
 				(d, i) =>
-					`${i * zoom + pos},${(1 - d.renotes / peak) * viewBoxY}`,
+					`${i * zoom.value + pos.value},${
+						(1 - d.renotes / peak) * viewBoxY.value
+					}`,
 			)
 			.join(" ");
-		pointsTotal = activity
+		pointsTotal.value = activity
 			.map(
 				(d, i) =>
-					`${i * zoom + pos},${(1 - d.total / peak) * viewBoxY}`,
+					`${i * zoom.value + pos.value},${
+						(1 - d.total / peak) * viewBoxY.value
+					}`,
 			)
 			.join(" ");
 	}
diff --git a/packages/client/src/widgets/clock.vue b/packages/client/src/widgets/clock.vue
index d1a6385b32..a8fa7b8303 100644
--- a/packages/client/src/widgets/clock.vue
+++ b/packages/client/src/widgets/clock.vue
@@ -46,6 +46,8 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from "vue";
+
 import {} from "vue";
 import type { Widget, WidgetComponentExpose } from "./widget";
 import {
@@ -200,7 +202,7 @@ const { widgetProps, configure } = useWidgetPropsManager(
 	emit,
 );
 
-const tzAbbrev = $computed(
+const tzAbbrev = computed(
 	() =>
 		(widgetProps.timezone === null
 			? timezones.find(
@@ -215,21 +217,21 @@ const tzAbbrev = $computed(
 			  )?.abbrev) ?? "?",
 );
 
-const tzOffset = $computed(() =>
+const tzOffset = computed(() =>
 	widgetProps.timezone === null
 		? 0 - new Date().getTimezoneOffset()
 		: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)
 				?.offset ?? 0,
 );
 
-const tzOffsetLabel = $computed(
+const tzOffsetLabel = computed(
 	() =>
-		(tzOffset >= 0 ? "+" : "-") +
-		Math.floor(tzOffset / 60)
+		(tzOffset.value >= 0 ? "+" : "-") +
+		Math.floor(tzOffset.value / 60)
 			.toString()
 			.padStart(2, "0") +
 		":" +
-		(tzOffset % 60).toString().padStart(2, "0"),
+		(tzOffset.value % 60).toString().padStart(2, "0"),
 );
 
 defineExpose<WidgetComponentExpose>({
diff --git a/packages/client/src/widgets/digital-clock.vue b/packages/client/src/widgets/digital-clock.vue
index 9b16a62de4..1b259b11f1 100644
--- a/packages/client/src/widgets/digital-clock.vue
+++ b/packages/client/src/widgets/digital-clock.vue
@@ -15,7 +15,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onUnmounted, ref, watch } from "vue";
+import { onUnmounted, ref, watch, computed } from "vue";
 import type { Widget, WidgetComponentExpose } from "./widget";
 import {
 	WidgetComponentEmits,
@@ -77,7 +77,7 @@ const { widgetProps, configure } = useWidgetPropsManager(
 	emit,
 );
 
-const tzAbbrev = $computed(
+const tzAbbrev = computed(
 	() =>
 		(widgetProps.timezone === null
 			? timezones.find(
@@ -92,21 +92,21 @@ const tzAbbrev = $computed(
 			  )?.abbrev) ?? "?",
 );
 
-const tzOffset = $computed(() =>
+const tzOffset = computed(() =>
 	widgetProps.timezone === null
 		? 0 - new Date().getTimezoneOffset()
 		: timezones.find((tz) => tz.name.toLowerCase() === widgetProps.timezone)
 				?.offset ?? 0,
 );
 
-const tzOffsetLabel = $computed(
+const tzOffsetLabel = computed(
 	() =>
-		(tzOffset >= 0 ? "+" : "-") +
-		Math.floor(tzOffset / 60)
+		(tzOffset.value >= 0 ? "+" : "-") +
+		Math.floor(tzOffset.value / 60)
 			.toString()
 			.padStart(2, "0") +
 		":" +
-		(tzOffset % 60).toString().padStart(2, "0"),
+		(tzOffset.value % 60).toString().padStart(2, "0"),
 );
 
 defineExpose<WidgetComponentExpose>({
diff --git a/packages/client/src/widgets/instance-cloud.vue b/packages/client/src/widgets/instance-cloud.vue
index e42037ed93..9aeb843711 100644
--- a/packages/client/src/widgets/instance-cloud.vue
+++ b/packages/client/src/widgets/instance-cloud.vue
@@ -20,6 +20,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref, shallowRef } from "vue";
+
 import {} from "vue";
 import {
 	WidgetComponentEmits,
@@ -58,8 +60,8 @@ const { widgetProps, configure } = useWidgetPropsManager(
 	emit,
 );
 
-const cloud = $ref<InstanceType<typeof MkTagCloud> | null>();
-let activeInstances = $shallowRef(null);
+const cloud = ref<InstanceType<typeof MkTagCloud> | null>();
+let activeInstances = shallowRef(null);
 
 function onInstanceClick(i) {
 	os.pageWindow(`/instance-info/${i.host}`);
@@ -71,8 +73,8 @@ useInterval(
 			sort: "+lastCommunicatedAt",
 			limit: 25,
 		}).then((res) => {
-			activeInstances = res;
-			if (cloud) cloud.update();
+			activeInstances.value = res;
+			if (cloud.value) cloud.value.update();
 		});
 	},
 	1000 * 60 * 3,
diff --git a/packages/client/src/widgets/rss-ticker.vue b/packages/client/src/widgets/rss-ticker.vue
index bb696a7ca2..9c9b741486 100644
--- a/packages/client/src/widgets/rss-ticker.vue
+++ b/packages/client/src/widgets/rss-ticker.vue
@@ -104,7 +104,7 @@ const { widgetProps, configure } = useWidgetPropsManager(
 
 const items = ref([]);
 const fetching = ref(true);
-let key = $ref(0);
+let key = ref(0);
 
 const tick = () => {
 	fetch(`/api/fetch-rss?url=${widgetProps.url}`, {}).then((res) => {
@@ -114,7 +114,7 @@ const tick = () => {
 			}
 			items.value = feed.items;
 			fetching.value = false;
-			key++;
+			key.value++;
 		});
 	});
 };
diff --git a/packages/client/src/widgets/server-metric/cpu-mem.vue b/packages/client/src/widgets/server-metric/cpu-mem.vue
index 67ed3bc7dc..1b3a5b1137 100644
--- a/packages/client/src/widgets/server-metric/cpu-mem.vue
+++ b/packages/client/src/widgets/server-metric/cpu-mem.vue
@@ -82,7 +82,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted } from "vue";
+import { onBeforeUnmount, onMounted, ref } from "vue";
 import { v4 as uuid } from "uuid";
 
 const props = defineProps<{
@@ -90,23 +90,23 @@ const props = defineProps<{
 	meta: any;
 }>();
 
-const viewBoxX: number = $ref(50);
-const viewBoxY: number = $ref(30);
-const stats: any[] = $ref([]);
+const viewBoxX: number = ref(50);
+const viewBoxY: number = ref(30);
+const stats: any[] = ref([]);
 const cpuGradientId = uuid();
 const cpuMaskId = uuid();
 const memGradientId = uuid();
 const memMaskId = uuid();
-let cpuPolylinePoints: string = $ref(""),
-	memPolylinePoints: string = $ref(""),
-	cpuPolygonPoints: string = $ref(""),
-	memPolygonPoints: string = $ref(""),
-	cpuHeadX: any = $ref(null),
-	cpuHeadY: any = $ref(null),
-	memHeadX: any = $ref(null),
-	memHeadY: any = $ref(null),
-	cpuP: string = $ref(""),
-	memP: string = $ref("");
+let cpuPolylinePoints: string = ref(""),
+	memPolylinePoints: string = ref(""),
+	cpuPolygonPoints: string = ref(""),
+	memPolygonPoints: string = ref(""),
+	cpuHeadX: any = ref(null),
+	cpuHeadY: any = ref(null),
+	memHeadX: any = ref(null),
+	memHeadY: any = ref(null),
+	cpuP: string = ref(""),
+	memP: string = ref("");
 
 onMounted(() => {
 	props.connection.on("stats", onStats);
@@ -122,38 +122,44 @@ onBeforeUnmount(() => {
 });
 
 function onStats(connStats) {
-	stats.push(connStats);
-	if (stats.length > 50) stats.shift();
+	stats.value.push(connStats);
+	if (stats.value.length > 50) stats.value.shift();
 
-	const cpuPolylinePointsStats = stats.map((s, i) => [
-		viewBoxX - (stats.length - 1 - i),
-		(1 - s.cpu) * viewBoxY,
+	const cpuPolylinePointsStats = stats.value.map((s, i) => [
+		viewBoxX.value - (stats.value.length - 1 - i),
+		(1 - s.cpu) * viewBoxY.value,
 	]);
-	const memPolylinePointsStats = stats.map((s, i) => [
-		viewBoxX - (stats.length - 1 - i),
-		(1 - s.mem.active / s.mem.total) * viewBoxY,
+	const memPolylinePointsStats = stats.value.map((s, i) => [
+		viewBoxX.value - (stats.value.length - 1 - i),
+		(1 - s.mem.active / s.mem.total) * viewBoxY.value,
 	]);
-	cpuPolylinePoints = cpuPolylinePointsStats
+	cpuPolylinePoints.value = cpuPolylinePointsStats
 		.map((xy) => `${xy[0]},${xy[1]}`)
 		.join(" ");
-	memPolylinePoints = memPolylinePointsStats
+	memPolylinePoints.value = memPolylinePointsStats
 		.map((xy) => `${xy[0]},${xy[1]}`)
 		.join(" ");
 
-	cpuPolygonPoints = `${
-		viewBoxX - (stats.length - 1)
-	},${viewBoxY} ${cpuPolylinePoints} ${viewBoxX},${viewBoxY}`;
-	memPolygonPoints = `${
-		viewBoxX - (stats.length - 1)
-	},${viewBoxY} ${memPolylinePoints} ${viewBoxX},${viewBoxY}`;
+	cpuPolygonPoints.value = `${viewBoxX.value - (stats.value.length - 1)},${
+		viewBoxY.value
+	} ${cpuPolylinePoints.value} ${viewBoxX.value},${viewBoxY.value}`;
+	memPolygonPoints.value = `${viewBoxX.value - (stats.value.length - 1)},${
+		viewBoxY.value
+	} ${memPolylinePoints.value} ${viewBoxX.value},${viewBoxY.value}`;
 
-	cpuHeadX = cpuPolylinePointsStats[cpuPolylinePointsStats.length - 1][0];
-	cpuHeadY = cpuPolylinePointsStats[cpuPolylinePointsStats.length - 1][1];
-	memHeadX = memPolylinePointsStats[memPolylinePointsStats.length - 1][0];
-	memHeadY = memPolylinePointsStats[memPolylinePointsStats.length - 1][1];
+	cpuHeadX.value =
+		cpuPolylinePointsStats[cpuPolylinePointsStats.length - 1][0];
+	cpuHeadY.value =
+		cpuPolylinePointsStats[cpuPolylinePointsStats.length - 1][1];
+	memHeadX.value =
+		memPolylinePointsStats[memPolylinePointsStats.length - 1][0];
+	memHeadY.value =
+		memPolylinePointsStats[memPolylinePointsStats.length - 1][1];
 
-	cpuP = (connStats.cpu * 100).toFixed(0);
-	memP = ((connStats.mem.active / connStats.mem.total) * 100).toFixed(0);
+	cpuP.value = (connStats.cpu * 100).toFixed(0);
+	memP.value = ((connStats.mem.active / connStats.mem.total) * 100).toFixed(
+		0,
+	);
 }
 
 function onStatsLog(statsLog) {
diff --git a/packages/client/src/widgets/server-metric/cpu.vue b/packages/client/src/widgets/server-metric/cpu.vue
index 46843363be..8461e118d9 100644
--- a/packages/client/src/widgets/server-metric/cpu.vue
+++ b/packages/client/src/widgets/server-metric/cpu.vue
@@ -10,7 +10,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted } from "vue";
+import { onBeforeUnmount, onMounted, ref } from "vue";
 import XPie from "./pie.vue";
 
 const props = defineProps<{
@@ -18,10 +18,10 @@ const props = defineProps<{
 	meta: any;
 }>();
 
-let usage: number = $ref(0);
+let usage: number = ref(0);
 
 function onStats(stats) {
-	usage = stats.cpu;
+	usage.value = stats.cpu;
 }
 
 onMounted(() => {
diff --git a/packages/client/src/widgets/server-metric/disk.vue b/packages/client/src/widgets/server-metric/disk.vue
index 67ea398c16..ac28c7cb50 100644
--- a/packages/client/src/widgets/server-metric/disk.vue
+++ b/packages/client/src/widgets/server-metric/disk.vue
@@ -11,6 +11,8 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from "vue";
+
 import {} from "vue";
 import XPie from "./pie.vue";
 import bytes from "@/filters/bytes";
@@ -19,10 +21,10 @@ const props = defineProps<{
 	meta: any; // TODO
 }>();
 
-const usage = $computed(() => props.meta.fs.used / props.meta.fs.total);
-const total = $computed(() => props.meta.fs.total);
-const used = $computed(() => props.meta.fs.used);
-const available = $computed(() => props.meta.fs.total - props.meta.fs.used);
+const usage = computed(() => props.meta.fs.used / props.meta.fs.total);
+const total = computed(() => props.meta.fs.total);
+const used = computed(() => props.meta.fs.used);
+const available = computed(() => props.meta.fs.total - props.meta.fs.used);
 </script>
 
 <style lang="scss" scoped>
diff --git a/packages/client/src/widgets/server-metric/meilisearch.vue b/packages/client/src/widgets/server-metric/meilisearch.vue
index 1c3b07fd14..bfadc0a3a3 100644
--- a/packages/client/src/widgets/server-metric/meilisearch.vue
+++ b/packages/client/src/widgets/server-metric/meilisearch.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted } from "vue";
+import { onBeforeUnmount, onMounted, ref } from "vue";
 import XPie from "./pie.vue";
 import bytes from "@/filters/bytes";
 import { i18n } from "@/i18n";
@@ -28,22 +28,22 @@ const props = defineProps<{
 	meta: any;
 }>();
 
-let progress: number = $ref(0),
-	serverStats = $ref(null),
-	totalSize: number = $ref(0),
-	indexCount: number = $ref(0),
-	available: string = $ref("unavailable");
+let progress: number = ref(0),
+	serverStats = ref(null),
+	totalSize: number = ref(0),
+	indexCount: number = ref(0),
+	available: string = ref("unavailable");
 
 function onStats(stats) {
-	totalSize = stats.meilisearch.size;
-	indexCount = stats.meilisearch.indexed_count;
-	available = stats.meilisearch.health;
-	progress = indexCount / serverStats.notesCount;
+	totalSize.value = stats.meilisearch.size;
+	indexCount.value = stats.meilisearch.indexed_count;
+	available.value = stats.meilisearch.health;
+	progress.value = indexCount.value / serverStats.value.notesCount;
 }
 
 onMounted(() => {
 	os.api("stats", {}).then((res) => {
-		serverStats = res;
+		serverStats.value = res;
 	});
 	props.connection.on("stats", onStats);
 });
diff --git a/packages/client/src/widgets/server-metric/mem.vue b/packages/client/src/widgets/server-metric/mem.vue
index da7ecd81e0..bc7c9d561b 100644
--- a/packages/client/src/widgets/server-metric/mem.vue
+++ b/packages/client/src/widgets/server-metric/mem.vue
@@ -11,7 +11,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted } from "vue";
+import { onBeforeUnmount, onMounted, ref } from "vue";
 import XPie from "./pie.vue";
 import bytes from "@/filters/bytes";
 
@@ -20,16 +20,16 @@ const props = defineProps<{
 	meta: any;
 }>();
 
-let usage: number = $ref(0),
-	total: number = $ref(0),
-	used: number = $ref(0),
-	free: number = $ref(0);
+let usage: number = ref(0),
+	total: number = ref(0),
+	used: number = ref(0),
+	free: number = ref(0);
 
 function onStats(stats) {
-	usage = stats.mem.active / stats.mem.total;
-	total = stats.mem.total;
-	used = stats.mem.active;
-	free = total - used;
+	usage.value = stats.mem.active / stats.mem.total;
+	total.value = stats.mem.total;
+	used.value = stats.mem.active;
+	free.value = total.value - used.value;
 }
 
 onMounted(() => {
diff --git a/packages/client/src/widgets/server-metric/net.vue b/packages/client/src/widgets/server-metric/net.vue
index b5e7cc8ef2..7f1c8c0464 100644
--- a/packages/client/src/widgets/server-metric/net.vue
+++ b/packages/client/src/widgets/server-metric/net.vue
@@ -40,7 +40,7 @@
 </template>
 
 <script lang="ts" setup>
-import { onBeforeUnmount, onMounted } from "vue";
+import { onBeforeUnmount, onMounted, ref } from "vue";
 import bytes from "@/filters/bytes";
 
 const props = defineProps<{
@@ -48,19 +48,19 @@ const props = defineProps<{
 	meta: any;
 }>();
 
-const viewBoxX: number = $ref(50);
-const viewBoxY: number = $ref(30);
-const stats: any[] = $ref([]);
-let inPolylinePoints: string = $ref(""),
-	outPolylinePoints: string = $ref(""),
-	inPolygonPoints: string = $ref(""),
-	outPolygonPoints: string = $ref(""),
-	inHeadX: any = $ref(null),
-	inHeadY: any = $ref(null),
-	outHeadX: any = $ref(null),
-	outHeadY: any = $ref(null),
-	inRecent: number = $ref(0),
-	outRecent: number = $ref(0);
+const viewBoxX: number = ref(50);
+const viewBoxY: number = ref(30);
+const stats: any[] = ref([]);
+let inPolylinePoints: string = ref(""),
+	outPolylinePoints: string = ref(""),
+	inPolygonPoints: string = ref(""),
+	outPolygonPoints: string = ref(""),
+	inHeadX: any = ref(null),
+	inHeadY: any = ref(null),
+	outHeadX: any = ref(null),
+	outHeadY: any = ref(null),
+	inRecent: number = ref(0),
+	outRecent: number = ref(0);
 
 onMounted(() => {
 	props.connection.on("stats", onStats);
@@ -76,44 +76,49 @@ onBeforeUnmount(() => {
 });
 
 function onStats(connStats) {
-	stats.push(connStats);
-	if (stats.length > 50) stats.shift();
+	stats.value.push(connStats);
+	if (stats.value.length > 50) stats.value.shift();
 
-	const inPeak = Math.max(1024 * 64, Math.max(...stats.map((s) => s.net.rx)));
+	const inPeak = Math.max(
+		1024 * 64,
+		Math.max(...stats.value.map((s) => s.net.rx)),
+	);
 	const outPeak = Math.max(
 		1024 * 64,
-		Math.max(...stats.map((s) => s.net.tx)),
+		Math.max(...stats.value.map((s) => s.net.tx)),
 	);
 
-	const inPolylinePointsStats = stats.map((s, i) => [
-		viewBoxX - (stats.length - 1 - i),
-		(1 - s.net.rx / inPeak) * viewBoxY,
+	const inPolylinePointsStats = stats.value.map((s, i) => [
+		viewBoxX.value - (stats.value.length - 1 - i),
+		(1 - s.net.rx / inPeak) * viewBoxY.value,
 	]);
-	const outPolylinePointsStats = stats.map((s, i) => [
-		viewBoxX - (stats.length - 1 - i),
-		(1 - s.net.tx / outPeak) * viewBoxY,
+	const outPolylinePointsStats = stats.value.map((s, i) => [
+		viewBoxX.value - (stats.value.length - 1 - i),
+		(1 - s.net.tx / outPeak) * viewBoxY.value,
 	]);
-	inPolylinePoints = inPolylinePointsStats
+	inPolylinePoints.value = inPolylinePointsStats
 		.map((xy) => `${xy[0]},${xy[1]}`)
 		.join(" ");
-	outPolylinePoints = outPolylinePointsStats
+	outPolylinePoints.value = outPolylinePointsStats
 		.map((xy) => `${xy[0]},${xy[1]}`)
 		.join(" ");
 
-	inPolygonPoints = `${
-		viewBoxX - (stats.length - 1)
-	},${viewBoxY} ${inPolylinePoints} ${viewBoxX},${viewBoxY}`;
-	outPolygonPoints = `${
-		viewBoxX - (stats.length - 1)
-	},${viewBoxY} ${outPolylinePoints} ${viewBoxX},${viewBoxY}`;
+	inPolygonPoints.value = `${viewBoxX.value - (stats.value.length - 1)},${
+		viewBoxY.value
+	} ${inPolylinePoints.value} ${viewBoxX.value},${viewBoxY.value}`;
+	outPolygonPoints.value = `${viewBoxX.value - (stats.value.length - 1)},${
+		viewBoxY.value
+	} ${outPolylinePoints.value} ${viewBoxX.value},${viewBoxY.value}`;
 
-	inHeadX = inPolylinePointsStats[inPolylinePointsStats.length - 1][0];
-	inHeadY = inPolylinePointsStats[inPolylinePointsStats.length - 1][1];
-	outHeadX = outPolylinePointsStats[outPolylinePointsStats.length - 1][0];
-	outHeadY = outPolylinePointsStats[outPolylinePointsStats.length - 1][1];
+	inHeadX.value = inPolylinePointsStats[inPolylinePointsStats.length - 1][0];
+	inHeadY.value = inPolylinePointsStats[inPolylinePointsStats.length - 1][1];
+	outHeadX.value =
+		outPolylinePointsStats[outPolylinePointsStats.length - 1][0];
+	outHeadY.value =
+		outPolylinePointsStats[outPolylinePointsStats.length - 1][1];
 
-	inRecent = connStats.net.rx;
-	outRecent = connStats.net.tx;
+	inRecent.value = connStats.net.rx;
+	outRecent.value = connStats.net.tx;
 }
 
 function onStatsLog(statsLog) {
diff --git a/packages/client/src/widgets/server-metric/pie.vue b/packages/client/src/widgets/server-metric/pie.vue
index 46f33c937f..5fe26cff7d 100644
--- a/packages/client/src/widgets/server-metric/pie.vue
+++ b/packages/client/src/widgets/server-metric/pie.vue
@@ -25,6 +25,8 @@
 </template>
 
 <script lang="ts" setup>
+import { computed } from "vue";
+
 import {} from "vue";
 
 const props = defineProps<{
@@ -34,13 +36,13 @@ const props = defineProps<{
 
 const r = 0.45;
 
-const color = $computed(
+const color = computed(
 	() =>
 		`hsl(${
 			props.reverse ? props.value * 180 : 180 - props.value * 180
 		}, 80%, 70%)`,
 );
-const strokeDashoffset = $computed(
+const strokeDashoffset = computed(
 	() => (1 - props.value) * (Math.PI * (r * 2)),
 );
 </script>
diff --git a/packages/client/src/widgets/user-list.vue b/packages/client/src/widgets/user-list.vue
index 45cdad00e8..cfcdacba22 100644
--- a/packages/client/src/widgets/user-list.vue
+++ b/packages/client/src/widgets/user-list.vue
@@ -28,6 +28,8 @@
 </template>
 
 <script lang="ts" setup>
+import { ref } from "vue";
+
 import type { Widget, WidgetComponentExpose } from "./widget";
 import { useWidgetPropsManager } from "./widget";
 import type { GetFormResultType } from "@/scripts/form";
@@ -62,9 +64,9 @@ const { widgetProps, configure, save } = useWidgetPropsManager(
 	props,
 	emit,
 );
-let list = $ref(),
-	users = $ref([]),
-	fetching = $ref(true);
+let list = ref(),
+	users = ref([]),
+	fetching = ref(true);
 async function chooseList() {
 	const lists = await os.api("users/lists/list");
 	const { canceled, result: list } = await os.select({
@@ -82,18 +84,18 @@ async function chooseList() {
 }
 const fetch = () => {
 	if (widgetProps.listId == null) {
-		fetching = false;
+		fetching.value = false;
 		return;
 	}
 	os.api("users/lists/show", {
 		listId: widgetProps.listId,
 	}).then((_list) => {
-		list = _list;
+		list.value = _list;
 		os.api("users/show", {
-			userIds: list.userIds,
+			userIds: list.value.userIds,
 		}).then((_users) => {
-			users = list.userIds;
-			fetching = false;
+			users.value = list.value.userIds;
+			fetching.value = false;
 		});
 	});
 };

From 5e89b269a4e3210a7a2de7421d47f0767959feaf Mon Sep 17 00:00:00 2001
From: ThatOneCalculator <kainoa@t1c.dev>
Date: Fri, 11 Aug 2023 17:51:35 -0700
Subject: [PATCH 2/2] fix: :bug: double comma

---
 packages/client/src/pages/admin/index.vue                 | 2 +-
 packages/client/src/pages/admin/overview.active-users.vue | 2 +-
 packages/client/src/pages/admin/overview.vue              | 2 +-
 packages/client/src/pages/user/followers.vue              | 2 +-
 packages/client/src/pages/user/following.vue              | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/client/src/pages/admin/index.vue b/packages/client/src/pages/admin/index.vue
index e9e99349fa..e1667fbf87 100644
--- a/packages/client/src/pages/admin/index.vue
+++ b/packages/client/src/pages/admin/index.vue
@@ -59,7 +59,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, inject, nextTick, onMounted, onUnmounted, onActivated, provide, watch, ref, , computed } from 'vue';
+import { defineAsyncComponent, inject, nextTick, onMounted, onUnmounted, onActivated, provide, watch, ref, computed } from 'vue';
 import { i18n } from "@/i18n";
 import MkSuperMenu from "@/components/MkSuperMenu.vue";
 import MkInfo from "@/components/MkInfo.vue";
diff --git a/packages/client/src/pages/admin/overview.active-users.vue b/packages/client/src/pages/admin/overview.active-users.vue
index 705e1d164c..0337c0acf9 100644
--- a/packages/client/src/pages/admin/overview.active-users.vue
+++ b/packages/client/src/pages/admin/overview.active-users.vue
@@ -8,7 +8,7 @@
 </template>
 
 <script lang="ts" setup>
-import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, , shallowRef, ref } from 'vue';
+import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, shallowRef, ref } from 'vue';
 import { Chart } from "chart.js";
 import tinycolor from "tinycolor2";
 import gradient from "chartjs-plugin-gradient";
diff --git a/packages/client/src/pages/admin/overview.vue b/packages/client/src/pages/admin/overview.vue
index ed71723713..a4f5c40703 100644
--- a/packages/client/src/pages/admin/overview.vue
+++ b/packages/client/src/pages/admin/overview.vue
@@ -60,7 +60,7 @@
 </template>
 
 <script lang="ts" setup>
-import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, , shallowRef, ref, computed } from 'vue';
+import { markRaw, version as vueVersion, onMounted, onBeforeUnmount, nextTick, shallowRef, ref, computed } from 'vue';
 import XFederation from "./overview.federation.vue";
 import XInstances from "./overview.instances.vue";
 import XQueue from "./overview.queue.vue";
diff --git a/packages/client/src/pages/user/followers.vue b/packages/client/src/pages/user/followers.vue
index 9448f2fb43..dd6b9eeed2 100644
--- a/packages/client/src/pages/user/followers.vue
+++ b/packages/client/src/pages/user/followers.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch, , ref } from 'vue';
+import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch, ref } from 'vue';
 import * as Acct from "firefish-js/built/acct";
 import * as misskey from "firefish-js";
 import XFollowList from "./follow-list.vue";
diff --git a/packages/client/src/pages/user/following.vue b/packages/client/src/pages/user/following.vue
index 1b652c747a..120a72c809 100644
--- a/packages/client/src/pages/user/following.vue
+++ b/packages/client/src/pages/user/following.vue
@@ -16,7 +16,7 @@
 </template>
 
 <script lang="ts" setup>
-import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch, , ref } from 'vue';
+import { defineAsyncComponent, computed, inject, onMounted, onUnmounted, watch, ref } from 'vue';
 import * as Acct from "firefish-js/built/acct";
 import * as misskey from "firefish-js";
 import XFollowList from "./follow-list.vue";