diff --git a/packages/client/src/components/page/page.textarea.vue b/packages/client/src/components/page/page.textarea.vue
index 5b4ee2b45..e699b0803 100644
--- a/packages/client/src/components/page/page.textarea.vue
+++ b/packages/client/src/components/page/page.textarea.vue
@@ -2,38 +2,22 @@
 <MkTextarea :model-value="text" readonly></MkTextarea>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
+import { watch } from 'vue';
+import MkTextarea from '../form/textarea.vue';
 import { TextBlock } from '@/scripts/hpml/block';
 import { Hpml } from '@/scripts/hpml/evaluator';
-import { defineComponent, PropType } from 'vue';
-import MkTextarea from '../form/textarea.vue';
 
-export default defineComponent({
-	components: {
-		MkTextarea
-	},
-	props: {
-		block: {
-			type: Object as PropType<TextBlock>,
-			required: true
-		},
-		hpml: {
-			type: Object as PropType<Hpml>,
-			required: true
-		}
-	},
-	data() {
-		return {
-			text: this.hpml.interpolate(this.block.text),
-		};
-	},
-	watch: {
-		'hpml.vars': {
-			handler() {
-				this.text = this.hpml.interpolate(this.block.text);
-			},
-			deep: true
-		}
-	}
+const props = defineProps<{
+	block: TextBlock;
+	hpml: Hpml;
+}>();
+
+let text = $ref(props.hpml.interpolate(props.block.text));
+
+watch(props.hpml.vars, () => {
+	text = props.hpml.interpolate(props.block.text);
+}, {
+	deep: true,
 });
 </script>