diff --git a/src/client/app/common/views/components/formula-core.vue b/src/client/app/common/views/components/formula-core.vue
new file mode 100644
index 0000000000..930f16b471
--- /dev/null
+++ b/src/client/app/common/views/components/formula-core.vue
@@ -0,0 +1,26 @@
+<template>
+<span v-html="compiledFormula"></span>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as katex from 'katex';
+
+export default Vue.extend({
+	props: {
+		formula: {
+			type: String,
+			required: true
+		}
+	},
+	computed: {
+		compiledFormula(): any {
+			return katex.renderToString(this.formula);
+		}
+	}
+});
+</script>
+
+<style>
+@import "../../../../../../node_modules/katex/dist/katex.min.css";
+</style>
diff --git a/src/client/app/common/views/components/formula.vue b/src/client/app/common/views/components/formula.vue
index 930f16b471..02ed96daac 100644
--- a/src/client/app/common/views/components/formula.vue
+++ b/src/client/app/common/views/components/formula.vue
@@ -1,26 +1,20 @@
 <template>
-<span v-html="compiledFormula"></span>
+<x-formula :formula="formula"/>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
-import * as katex from 'katex';
 
 export default Vue.extend({
+	components: {
+		XFormula: () => import('./formula-core.vue').then(m => m.default)
+	},
+
 	props: {
 		formula: {
 			type: String,
 			required: true
 		}
-	},
-	computed: {
-		compiledFormula(): any {
-			return katex.renderToString(this.formula);
-		}
 	}
 });
 </script>
-
-<style>
-@import "../../../../../../node_modules/katex/dist/katex.min.css";
-</style>