diff --git a/src/client/components/page/page.if.vue b/src/client/components/page/page.if.vue
index 1e0c84154..50c28ec34 100644
--- a/src/client/components/page/page.if.vue
+++ b/src/client/components/page/page.if.vue
@@ -6,7 +6,6 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import * as os from '@/os';
 
 export default defineComponent({
 	props: {
diff --git a/src/client/components/page/page.textarea.vue b/src/client/components/page/page.textarea.vue
index e2929de5f..205448977 100644
--- a/src/client/components/page/page.textarea.vue
+++ b/src/client/components/page/page.textarea.vue
@@ -5,7 +5,6 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import MkTextarea from '../ui/textarea.vue';
-import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/components/page/page.vue b/src/client/components/page/page.vue
index f7f565a8d..b95777947 100644
--- a/src/client/components/page/page.vue
+++ b/src/client/components/page/page.vue
@@ -12,7 +12,6 @@ import { faHeart } from '@fortawesome/free-regular-svg-icons';
 import XBlock from './page.block.vue';
 import { Hpml } from '@/scripts/hpml/evaluator';
 import { url } from '@/config';
-import * as os from '@/os';
 
 export default defineComponent({
 	components: {
diff --git a/src/client/scripts/hpml/evaluator.ts b/src/client/scripts/hpml/evaluator.ts
index 01a122c0e..bd7ec600c 100644
--- a/src/client/scripts/hpml/evaluator.ts
+++ b/src/client/scripts/hpml/evaluator.ts
@@ -7,6 +7,7 @@ import { createAiScriptEnv } from '../aiscript/api';
 import { collectPageVars } from '../collect-page-vars';
 import { initLib } from './lib';
 import * as os from '@/os';
+import { markRaw, ref, Ref } from 'vue';
 
 type Fn = {
 	slots: string[];
@@ -23,7 +24,7 @@ export class Hpml {
 	public aiscript?: AiScript;
 	private pageVarUpdatedCallback;
 	public canvases: Record<string, HTMLCanvasElement> = {};
-	public vars: Record<string, any>;
+	public vars: Ref<Record<string, any>> = ref({});
 	public page: Record<string, any>;
 
 	private opts: {
@@ -38,7 +39,7 @@ export class Hpml {
 		this.opts = opts;
 
 		if (this.opts.enableAiScript) {
-			this.aiscript = new AiScript({ ...createAiScriptEnv({
+			this.aiscript = markRaw(new AiScript({ ...createAiScriptEnv({
 				storageKey: 'pages:' + this.page.id
 			}), ...initLib(this)}, {
 				in: (q) => {
@@ -56,7 +57,7 @@ export class Hpml {
 				},
 				log: (type, params) => {
 				},
-			});
+			}));
 
 			this.aiscript.scope.opts.onUpdated = (name, value) => {
 				this.eval();
@@ -89,7 +90,7 @@ export class Hpml {
 	@autobind
 	public eval() {
 		try {
-			this.vars = this.evaluateVars();
+			this.vars.value = this.evaluateVars();
 		} catch (e) {
 			//this.onError(e);
 		}
@@ -99,7 +100,7 @@ export class Hpml {
 	public interpolate(str: string) {
 		if (str == null) return null;
 		return str.replace(/{(.+?)}/g, match => {
-			const v = this.vars ? this.vars[match.slice(1, -1).trim()] : null;
+			const v = this.vars[match.slice(1, -1).trim()];
 			return v == null ? 'NULL' : v.toString();
 		});
 	}