From cff82ea52e34c89294a580156db497c8b2a87840 Mon Sep 17 00:00:00 2001
From: Francis Dinh <normandy@biribiri.dev>
Date: Sun, 24 Jul 2022 00:50:20 -0400
Subject: [PATCH] refactor: page.textarea.vue to use composition api

---
 .../src/components/page/page.textarea.vue     | 44 ++++++-------------
 1 file changed, 14 insertions(+), 30 deletions(-)

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>