Updating tinymce editor text between components

Question

So I'm using the tinymce editor for Vue. I'm displaying one Editor in the parent component, and then rendering another Editor in the child which reactively displays what has been typed in the parent. The problem I'm running into is that the child is one character behind. I tried making the editor content its own variable in the child instead of being passed via props, but I couldn't figure out a way to update correctly while also saving the HTML tags that tinymce adds.

Here's what I have:

The parent component:

                        <Editor
                          v-model="body"
                          api-key=****
                          model-events="change keydown blur focus paste undo redo"
                          :init="{
                            height: 300,
                            menubar: false,
                            nonbreaking_force_tab: true,
                            branding: false,
                            init_instance_callback: function (editor) {
                              editor.on('Change', function (e) {
                                setHasChanges(); //this just says the form has updates
                              });
                            },
                            plugins: [
                              'advlist autolink lists link image charmap',
                              'searchreplace visualblocks code fullscreen',
                              'print preview anchor insertdatetime media',
                              'paste code help wordcount table'
                            ],
                            toolbar:
                              'undo redo | formatselect | bold italic | \
                            bullist numlist | \
                            alignleft aligncenter alignright outdent indent | help'
                          }"
                        >
                        </Editor>

And the child:

        <Editor
          :value="body"
          api-key=***
          model-events="change keydown blur focus paste undo redo"
          disabled="true"
          :init="{
            menubar: false,
            branding: false,
            toolbar: false,
            statusbar: false,
            content_style:
              'body { font-size: 12px; line-height: 1.35; margin: 10px auto 0; display: block; position: relative; height: 100px; overflow-x: hidden }'
          }"
        >
        </Editor>

So if the editor of the parent component had this:

<h2>Here is a title!</h2>
<ul>
 <li>and a bullet point</li>
 <li>and another</li>
</ul>

The child would display:

Here is a title!

1. and a bullet point
2. and another

How can I update the child reactively while still keeping the HTML tags?

Answer 1

So I figured it out. All I had to do was add "input" into the model-events of the editor on the parent component.