diff --git a/packages/client/src/components/formula-core.vue b/packages/client/src/components/formula-core.vue
index 6028db9e6..94660e721 100644
--- a/packages/client/src/components/formula-core.vue
+++ b/packages/client/src/components/formula-core.vue
@@ -4,29 +4,18 @@
 <span v-else v-html="compiledFormula"></span>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script lang="ts" setup>
+import { computed } from 'vue';
 import katex from 'katex';
 
-export default defineComponent({
-	props: {
-		formula: {
-			type: String,
-			required: true,
-		},
-		block: {
-			type: Boolean,
-			required: true,
-		},
-	},
-	computed: {
-		compiledFormula(): any {
-			return katex.renderToString(this.formula, {
-				throwOnError: false,
-			} as any);
-		},
-	},
-});
+const props = defineProps<{
+	formula: string;
+	block: boolean;
+}>();
+
+const compiledFormula = computed(() => katex.renderToString(props.formula, {
+	throwOnError: false,
+}));
 </script>
 
 <style>