diff --git a/packages/client/src/components/MkAbuseReport.vue b/packages/client/src/components/MkAbuseReport.vue
index b1029fac0..553652394 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 c745e4083..17cab18da 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 3a6b8f321..53f20d3d4 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 753d1001e..1176ffcdc 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 f94c2e317..22920270b 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 7a3acb187..6febec9f1 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 9be70fa14..3cfd332c7 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 5fe8d6afb..6f003b320 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 07f086601..e4898faba 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 8921ef3bc..b3592b6e0 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 cbb916a62..90db31a8d 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 fb7074a18..c436fcd32 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 13ab9a50f..c774efcdc 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 3e2723dcc..312b656ba 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 c2a507173..516264e3a 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 8563ae4f0..8043f4e6c 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 ebb310926..e63fb8fad 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 9e1e48215..f58551717 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 bbacc669d..0539ed44f 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 590248308..bcf2b8305 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 d0eaa8def..95370eebd 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 bf23b8e0e..8c604e5fc 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 2393d4396..c7a12ecad 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 a6d74edd1..811f3cad7 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 734f6a17c..e0d1366a1 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 2d54d0b56..b1c6114e1 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 7da81718b..041239b19 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 ee11060f3..a0ccedd60 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 690ba62ad..5d73ac24b 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 4471cb818..9131a6778 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 20b084855..d6ee9ea6b 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 2f3b469fe..dc4d29c89 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 739c9e30f..9537ac9ed 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 8c619b9bb..a65f48d56 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 c5898a1c7..9e43aef4f 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 166c803f0..f911cfe41 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 13b44943d..ab740c859 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 1ce138e4d..c008137d8 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 17f8b9a72..b9e7a3d5c 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 acb52ea7f..0afb1f789 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 5be3a364d..274463a57 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 8a499106a..9024d6fc5 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 ae7544b7c..2ffc9483b 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 b1ee057cc..41db86161 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 f85f03121..8f7808694 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 1c5d2f795..a06820253 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 853185e41..6386f6c6d 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 369ec122d..1c5ec315d 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 d63ba9660..bd62d8e22 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 3591cb91a..4e3780598 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 76d014313..aaaf9ad7d 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 30bbaa1ac..9ab9237b2 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 d2c189be5..784211057 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 4c02e1243..f219988d7 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 167355dbd..dd195947a 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 ed5c1cfe4..458e9a4bd 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 3572b110f..595e61c3b 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 1556f9cc0..fb7c472f9 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 3cb6e99c3..e44b5b71e 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 bb7c376d5..7f80b7f88 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 a4d9716bb..0f4528808 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 8534dd122..2c6d59bb2 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 38ebe29e3..fef7d0898 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 a47ae4158..537b9df93 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 83882e4ed..f34689758 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 a01428034..3c363c249 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 48b675a03..cad993bf8 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 0914104d5..347b763cd 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 5a23d03fb..0bb8ebee9 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 32066a1a9..39d021712 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 e82c79496..9f6f2dafc 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 323334438..4bcd72ece 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 3e3b44af4..7bc79fdf3 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 651688d72..453d74187 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 b22b7d203..89073651a 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 35c0cdc56..57d7b8b0e 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 87647dc1d..60481fd38 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 ae0e48929..360c81b61 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 27d8a700c..a3e62a055 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 b2172b307..941b5b191 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 bdf992190..79960e9d6 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 2362c1f93..8dfe3530c 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 7222ba318..94ef4d17e 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 3eaee5566..ffdc1a665 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 053f3d3e7..cff9f4065 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 94279c191..cb5b740d9 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 32ce9bfae..9a0f39a28 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 64329b87a..bf8b549f5 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 d37b257d4..2c160e761 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 d10ee44f3..6ae71f5b1 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 ac691a966..e9e99349f 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 f3c4f542c..bad9ae6f7 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 2bf047069..ba81f316f 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 67c57a7dd..a9bd2b8c4 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 510b32a08..516d43990 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 c90a970c7..98eb103ba 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 1d74e752a..55ec9021b 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 25dcac494..705e1d164 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 c655336e8..550684a88 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 ab4dd2c69..28da787e6 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 e926fdc53..e70cc739d 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 48d407e7d..b995c65a9 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 a29cc20b9..b1ebed6a5 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 5b003887e..1084f2e39 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 172e346e7..de301b0b9 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 5e878aaad..860044ea8 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 9017eb2a2..30f60e748 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 d88022595..ed7172371 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 eb14fa52f..c8147bb8d 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 7d72b0ac0..ae0502d3c 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 2b6f271c6..b220201d3 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 b8920f332..15a6bdcf0 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 34f76db69..948336eb2 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 b93c80361..1c3f2e582 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 a33335089..9b47214c0 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 82d98462a..f7afa558c 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 b672a4bd6..e60b56d8d 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 011e44ce6..0fb93c7a0 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 919d81d71..f8b9ae38b 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 203c69770..5492dac29 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 704095829..974c77932 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 65f4dbf0c..cc38ea304 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 6da2b8554..b630a9102 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 2b4bf2d1f..1b3a1b965 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 ae502659d..23cccc755 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 265e00e7f..07403a2ba 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 c5b638ba4..d68dd5d6a 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 d6afcf456..dd323f7b0 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 72da912ea..39a308ceb 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 45e7bd7ae..4cee4f953 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 aa55cc15b..98a544f60 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 2b696bfb2..6cac8b4e8 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 111bf537c..48e34a1be 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 c87cdb0b1..0d318013c 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 872b8f571..7c9a337da 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 5c62d6f45..95cbea688 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 6effc3f18..54c6c60c2 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 7fedce007..4e85d71b2 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 040a6b052..250633ded 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 36254ff74..3b64f3f7a 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 0611fa10c..a9e58807c 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 259c6db69..3a722dcef 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 f88ee5a9b..fdfaf509d 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 d77751e8d..0868efcff 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 d4cc6ab71..719d717ca 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 cb3a74f57..09b4469a6 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 fe02c2ddd..850e363df 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 d4ec84cff..12d554525 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 32ef04c13..005759586 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 fffcb2d13..ed318f4b4 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 0f95c79a0..114f111b4 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 a3c66a80c..6b9a389fb 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 63082b5ab..e00e66e65 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 7fda39303..d4e9f379c 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 54f701890..b89bed94d 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 6b051f683..50130bfa7 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 cfec4bd38..ec00cd803 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 bdc258489..f4d706ee1 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 b95061c7e..c63a73e82 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 7bb300c99..1da5a56a7 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 395bf11f9..4c8de5cd7 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 77b4bf835..91a43f150 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 45ab40c70..de78c5f7c 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 4a1598e16..ae5780996 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 faaee07db..d4c61b0d2 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 52a9fb15a..83c3866b4 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 910ebaa57..fb85acf0c 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 f42bb77ba..687d1dae9 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 e24ff33a9..d6fd68ad2 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 67818f9e0..24869b1bc 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 99f21277f..cb0c5f8e1 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 574806c08..ba604dfc8 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 847b50aeb..f8d567dbf 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 089a9d0a9..4a9480027 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 e7a8183f3..fd8df7cdb 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 19cfac58f..8b35d5d99 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 def40a277..bf58c7443 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 4c8ce7a3d..8a8f37607 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 ef4182f39..0e6833f44 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 413f0c9fd..f747ca29f 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 81e9ec875..08e1a1797 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 d7b6c1d49..58bf607aa 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 da532b770..9f020a3ab 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 6a069493f..60dedadec 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 a38c4a062..00b07a9b3 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 b5e1b76dc..06f193864 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 dcee4587f..bb37e9aa5 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 554b5498e..0d1392355 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 fa33ac887..a5c299f4d 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 29f14fd48..9dfe619ee 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 d0979408b..d62a44f44 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 bc890a569..e44901580 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 96a80e8c6..d79d965f1 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 0428de0f7..10423faef 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 79689b4e2..d075ff57c 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 437f73182..2b490be26 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 9d171c446..58eadb6b7 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 3ff25c345..348923f11 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 e80b0dd83..86a14783e 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 9c69358bf..7429b3491 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 161eb16e9..e764f0476 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 deb1f7846..9e8d03f28 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 e9a1792a0..b4816b967 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 cec2cb980..d30c76962 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 930a9635a..bcf885360 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 9e19996a7..fb6c601ba 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 b6e1127eb..5a31e342a 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 de823f6d4..9448f2fb4 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 abd7c518c..1b652c747 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 5250a3c3d..5aaa886fa 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 92ecc8bae..48af5d82e 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 256547323..4f66962c4 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 e6ba471d6..3f9a1657c 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 b5830aec4..0b9f25608 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 7267c0e9f..0fbfd064b 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 739e29a35..ce8601c7d 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 2b66a9168..976b6c037 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 c88bcc7ec..0d7102a31 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 170dade21..e7025eb27 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 606f3f1bd..4797794e4 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 e7b6da913..39e7ebba0 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 a3d06295c..4898e9ea8 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 6fdcfb28d..71bb80b01 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 8e3001738..47b608be2 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 e53290d97..1c1fdb668 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 d9262d149..3e4d9d937 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 110258f0e..e141dc1d1 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 b284f9073..9c46cfb96 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 c419b0469..19ea90743 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 6f4090a9e..364b3d0a5 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 5fca26489..882f59ddc 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 dc6257cc3..076b0f78f 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 c1d090ef6..07ebaf69c 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 b171420d7..d4e6dae87 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 0f8eccb3c..16f55238c 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 d1a6385b3..a8fa7b830 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 9b16a62de..1b259b11f 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 e42037ed9..9aeb84371 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 bb696a7ca..9c9b74148 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 67ed3bc7d..1b3a5b113 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 46843363b..8461e118d 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 67ea398c1..ac28c7cb5 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 1c3b07fd1..bfadc0a3a 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 da7ecd81e..bc7c9d561 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 b5e7cc8ef..7f1c8c046 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 46f33c937..5fe26cff7 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 45cdad00e..cfcdacba2 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;
 		});
 	});
 };