RealTime обновление markdowm

Всем привет, пытаюсь сделать бесшовный markdown редактор, как в dropbox paper.
То есть ты начал вводить markdown, а он автоматически меняется и ты продолжаешь его редактировать. В dropbox paper точь-в-точь как нужно.
Использую vuejs3, пытался использовать через div contenteditable и watch, привязывая событие @input к обновлению, то есть если сработал @input - мы перевели весь написанный текст в markdown и вернули в contenteditable div, но фокус постоянно пропадает и способ этот явно не самый рабочий.
Буду очень благодарен за помощь

<template>

<div contenteditable=""
     :value='message'
     v-html="message"
     @input="controlContent"></div>
</template>

<script>
export default {
  name: "Test",

  data() {
    return {
      message: "",
    }
  },
  
  methods: {
    controlContent(e) {
      let markdown = require('markdown-it')
      let md = new markdown()
      let result = md.render(e.target.innerText)
      this.message = result
    },
  }
}
</script>

Код сверху - простая копия того, что я пытаюсь сделать