Wiris MathType does not parse MathML on Vue Component reload - vue.js

Question

I am working on a Vue JS app which has MathType plugin and the plugin works fine when the formula is entered and it is displayed in the correct format. But when the component is destroyed and created again and the previously entered data is passed into the component using v-model, the MathML code is intact (as observed in Vue inspector) but only the raw text content is shown in the editor and the equations are not parsed to the image format. If I reload the entire page with the v-model containing formulae, MathType parses it and displays the correct images. Is there a way to trigger this parsing for dynamically/programatically added text in CKEditor 4? Here is my code:
<template>
<div>
<input v-bind:name="fieldName" type="hidden" v-model="content" />
<ckeditor v-bind:editor-url="editorUrl" ref="editor" v-bind:config="editorConfig" v-model="content"></ckeditor>
</div>
</template>
<script>
import CKEditor from 'ckeditor4-vue';
export default {
props: {
currentContent: {
type: String,
default: null,
},
fieldName: {
type: String,
default: 'content',
},
toolbarType: {
type: String,
default: 'Full',
},
},
data: function () {
return {
editorConfig: {
embed_provider: '//ckeditor.iframe.ly/api/oembed?url={url}&callback={callback}',
mathJaxLib: '//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js?config=TeX-AMS_HTML',
protectedSource: [/<u[^>]><\/u>/g],
toolbar_Exam: [
['Cut', 'Copy', 'Paste', 'PasteFromText', 'PasteFromWord', 'Undo', 'Redo'],
['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'],
['Outdent', 'Indent', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'],
['Table', 'HorizontalRule', 'Smiley', 'SpecialChar'],
['Styles', 'Format', 'Font', 'FontSize', 'TextColor', 'BGColor'],
//['oembed', 'MediaEmbed'],
['ckeditor_wiris_formulaEditor', 'ckeditor_wiris_formulaEditorChemistry'],
],
toolbar_Full: null,
toolbar: this.toolbarType,
allowedContent: true,
extraAllowedContent: 'math[xmlns]; maction; maligngroup; malignmark; menclose; merror; mfenced; mfrac; mglyph; mi;' +
'mlabeledtr; mlogdiv; mmultiscripts; mn; mo; mover; mpadded; mphantom; mroot; mrow; ms; mscarries; mscarry;' +
'msgroup; mstack; msline; mspace; msqrt; msrow; mstack; mstyle; msub; msup; msubsup; mtable; mtd; mtext; mtr;' +
'munder; munderover; semantics; annotation; annotation-xml;',
},
editorUrl: siteUrl+'/vendor/ckeditor/ckeditor.js',
};
},
components: {
'ckeditor': CKEditor.component,
},
};
</script>

Answer 1

I have fixed this problem by using the Generic Wiris MathType Plugin https://www.npmjs.com/package/#wiris/mathtype-generic and importing the wirisplugin-generic.js script and using the WirisPlugin.Parser.initParse on the content variable in the component in the mounted function.
mounted() {
this.content = WirisPlugin.Parser.initParse(this.content);
}
And this has resolved the issue.