move result to separate component

src/components/Result.vue

@@ -0,0 +1,30 @@
+<script>
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'Result',
+  props: [
+    'data'
+  ],
+});
+</script>
+
+<style scoped>
+.result {
+  overflow-x: auto;
+  overflow-y: auto;
+  margin: 0;
+  padding: 8px;
+  height: 100%;
+  display: block;
+  font-family: monospace;
+  white-space: pre;
+  line-height: normal;
+}
+</style>
+
+<template>
+  <div class="result">
+    <pre>{{ data }}</pre>
+  </div>
+</template>

src/views/HomeView.vue

@@ -1,5 +1,7 @@
 <script>
 
+import Result from '../components/Result.vue';
+
 import Worker from '../file.worker.js?worker';
 // const worker = new Worker();
 
@@ -17,6 +19,7 @@ export default defineComponent({
   components: {
     Codemirror,
     Splitter, SplitterPanel,
+    Result,
   },
   data() {
     const code = `
@@ -151,7 +154,7 @@ main {
         />
       </SplitterPanel>
       <SplitterPanel class="right-pane">
-        <pre class="result">{{ result }}</pre>
+        <Result :data="result"/>
       </SplitterPanel>
     </Splitter>
   </main>