How to update the text of a Tinymce text component? - vue.js

Question

I have the following situation, I have a listing where if I press brings me the text to the text editor, the issue arises when I want to add more text and this is bugged in an endless cycle killing Vue, I do not know if it is wrongly done or not.
Tinymce Component
<template>
<div>
<editor
:id="uuid"
api-key="xxxxxxxx"
:init="editorInit"
v-model="content"
/>
</div>
</template>
<script>
import Editor from '#tinymce/tinymce-vue'
export default {
name: "tinymce",
components: {
'editor': Editor
},
props: ['resultsEditor','clearcomponent','uuidEditor','size','setContentText'],
data() {
return {
uuid: this.uuidEditor,
content: null,
editorInit: {
height: this.size,
menubar: false,
entity_encoding: 'raw',
language: 'es',
plugins: ['image', 'advlist', 'autolink', 'lists', 'link', 'charmap', 'preview', 'anchor',
'searchreplace', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 'table',
'help', 'wordcount'
],
toolbar: 'undo redo | image | blocks | bold | alignleft aligncenter alignright alignjustify | bullist numlist | table ', // | removeformat', //outdent indent => incrementar sangría
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }',
branding: false,
relative_urls: false,
remove_script_host : false,
document_base_url : window.location.origin,
automatic_uploads: true,
resize_img_proportional: true,
setup: function(editor) {
editor.on('init', function(args) {
editor = args.target;
editor.on('NodeChange', function(e) {
if (e && e.element.nodeName.toLowerCase() == 'img') {
var width = 0;
var height = 0;
width = e.element.width
height = e.element.height
if (width > 800) {
height = height / (width / 800);
width = 800;
}
tinyMCE.DOM.setAttribs(e.element, {
'width': width,
'height': height
});
}
});
});
},
images_upload_handler: (blobInfo) => {
return new Promise((success, failure) => {
var xhr, formData;
xhr = new XMLHttpRequest();
xhr.withCredentials = false;
xhr.open('POST', route('upload_image_no_attach'));
xhr.onload = function() {
var json;
if (xhr.status != 200) {
reject('HTTP Error: ' + xhr.status);
return;
}
json = JSON.parse(xhr.responseText);
if (!json || typeof json.location != 'string') {
reject('Invalid JSON: ' + xhr.responseText);
return;
}
// success(json.location);
if (xhr.status === 200) {
const location =
`${window.location.origin}/opportunity/preview/${json.location}`;
success(location)
}
};
formData = new FormData();
formData.append('image', blobInfo.blob(), blobInfo.filename());
xhr.send(formData);
});
}
}
}
},
watch: {
content: function (newValue, oldValue){
this.resultsEditor(this.content)
},
clearcomponent: function(){
if (this.clearcomponent) {
tinyMCE.get(this.uuidEditor).setContent('');
this.content = null
}
},
setContentText: function(){
// console.log(this.setContentText)
if (this.setContentText != '') {
tinyMCE.get(this.uuidEditor).setContent(this.setContentText);
this.content = this.setContentText //Problem to update data to other component.
}
}
}
}
</script>
Modal Template Component
<!-- LISTADO DE PLANTILLAS -->
<b-list-group class="mt-2 search-width scroll-custom-template" v-if="listTemplates.length > 0">
<b-list-group-item
v-for="data in filterByList" :key="data.id"
class="with-coursor"
:active="textID == data.id"
#click="selectTemplate(data)"
>{{ data.name }}</b-list-group-item>
</b-list-group>
<!-- END LISTADO DE PLANTILLAS -->
</div>
<div class="col-sm-9 col-md-9 col-lg-9">
<tinymce
uuidEditor="template_opportunity"
size="450"
:setContentText="text"
:clearcomponent="this.clearContent"
:resultsEditor="onResultsEditor"
></tinymce>
</div>
onResultsEditor(text){
// this.text = text //It writes the text in it from left to left and not from left to right.
},
Example:
This is my original template that I select:
Hello world, you are in europe :D.
This is what it writes me when I fill in the input and I want to update.
The word is: Nuevo
oveuHello world, you are in europe :D.N