How to move Tinymce's own methods to Vue? - vue.js

Question

Hi I am moving views from Laravel to Vue2, and work it as components and I have the problem that I don't know how to move 2 functions that I made in JS to Vue, which are setup and image_upload.
CODE JS
var tin = tinymce.init({
selector: 'textarea#description',
height: 300,
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 | customInsertData | preview', // | 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') {
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') }}');
var token = '{{ csrf_token() }}';
xhr.setRequestHeader("X-CSRF-TOKEN", token);
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);
});
}
});
Vue
<template>
<div>
<editor
id="uuid"
:api-key="key"
:init="{
height: 300,
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,
}"
v-model="content"
/>
</div>
</template>
I tried placing the setup as in the JS but it didn't work and as a method I can't think how to call it in the editor.