Markdown in editor rendering? (Vue)

i have this vue component which has a textarea field for inputting markdown content and underneath i display the rendered content. But i want it to work similarly to something like Obsidian(All content is rendered in the editor field beside the line where the cursor is which should display the markdown content)

Who can i achieve this(in Vue)?

<template>
  <div class="p-2">  
    <textarea v-model="markdownText" class="w-full border rounded-md p-2 focus:outline-none resize-none"/>
    <div>
      <component 
        v-for="(node, index) in renderedNodes" 
        :key="index" 
        :is="node"
        />
    </div>
  </div>
</template>

import { ref, watch, onMounted, h } from 'vue';
import { marked } from '../lib/marked/marked';

const markdownText = ref("### Hello World!nThis is a [link](http://example.com)");
const renderedNodes = ref([]);


// Watch for changes in markdownText and re-render
watch(markdownText, async (newMarkdown) => {
  try {
    renderedNodes.value = await Promise.resolve(marked(newMarkdown));
  } catch (error) {
    console.error('Markdown parsing error:', error);
  }
});

// Initial rendering on mount
onMounted(async () => {
  try {
    renderedNodes.value = await Promise.resolve(marked(markdownText.value));
  } catch (error) {
    console.error('Initial markdown parsing error:', error);
  }
});
</script>