why my wysiwyg editor works so slow in vuejs?

Question

I decided to use wysiwyg editor on my page. I'm using simple two-way data binding via v-model="text" and simpy output <div v-html="text"></div>. I'm beginner in vuejs, but I need to ask this question: Why this is running so slow? It doesn't matter if it is quill editor/medium-editor/vueditor.

Every time I type new letter, the delay is very noticable and user experience is poor. My console gives a messages:

[Violation] 'message' handler took 199ms

and sometimes

[Violation] Added synchronous DOM mutation listener to a 'DOMNodeInserted'
event. Consider using MutationObserver to make the page more responsive.

It's even worse if I bind it into computed property (delays up to 250ms)- which I will need to do soon. And I also need to do two-way data binding in my case.

What am I doing wrong? How could I speed up typing process annd improve typing experience? My component has about 1,5k lines. Could that be the case?

edit:

I've break my 1,5k lines code component into separate part for editing and this already improve web speed from about 250 ms to 50-60ms, but wysiwyg editor and two-way data binding remain still noticebly slow.

edit2: code (using vuetify)

Example1 (mid-fast):

<v-text-field
  label="Write something"
  v-model="text"
  counter
  max="120"
  rows="3"
  full-width
  multi-line
  single-line
></v-text-field>
<div  v-html="textComputed"></div>

data () {
  return {
    text: ''
  }
},
computed: {
  textComputed() {
  //using computed to add <li> tags
    return '<li>' + this.text.replace(/\n/g, "<br /></li><li>") + '</li>'
  }
}

Example2 (slow):

<quill-editor 
      v-model="text"
      :options="editorOptionProTemplate"
      >
</quill-editor>
<div  v-html="textComputed"></div>

data () {
  return {
    text: ''
  }
},
computed: {
  //using computed for many variants for styling output in web (here just adding <b> tag)
  textComputed() {
    return '<b>' + this.text + '</b>'
  }
}

Answer 1

I think your best friend here is debounce. You can v-model a computed whose set function debounces the setting of the value:

debounceText: {
  get() { return this.text; },
  set: _.debounce(function(newValue) {
    this.text = newValue;
  }, 100)
},

You will see a little lag in the updating of the HTML output, but much less lag in the editor as you type. I have made a fiddle to demonstrate. Copy a bunch of text in and see how it handles for you.