[Vuejs]-How to highlight the Syntax error using the lint in CodeMirror Lint and remove the CodeMirror to make normal textarea

I was finally able to find the resolution.

For removing the CodeMirror we can do something like this:

      this.xmlEditor.toTextArea()
      this.xmlEditor = null

or make some validation and then reset the values:

      if (this.xmlEditor !== null) {
        document.getElementById('xml').value = ''
        this.xmlEditor.setValue('')
        this.xmlEditor.toTextArea()
        this.xmlEditor = null
      }

For beautifying and the showing the syntax error, I am using something like this:

<template>
  <div>
    CODE MIRROR
    <div class="row">
      <div class="col-sm-3">
        <button class="btn btn-primary" @click="resetArea">
          Reset
        </button>
      </div>
    </div>
    <div class="row">
      <div class="col-md-1" />
      <div class="col-md-5">
        <div class="row">
          <div class="col-md-12" style="display: flex">
            <textarea
              id="xml"
              v-model="xmlInput"
              class="form-control"
              placeholder="XML Document"
              spellcheck="false"
              data-gramm="false"
              @input="convertToJSON()"
            />
          </div>
        </div>
      </div>
      <div class="col-md-5">
        <div class="row">
          <div class="col-md-12">
            <textarea
              id="json"
              v-model="jsonInput"
              class="form-control"
              placeholder="JSON Document"
              spellcheck="false"
              data-gramm="false"
              @input="convertToXML()"
            />
          </div>
        </div>
      </div>
      <div class="col-md-1" />
    </div>
  </div>
</template>

<script>
let CodeMirror = null
if (typeof window !== 'undefined' && typeof window.navigator !== 'undefined') {
  CodeMirror = require('codemirror')
  require('codemirror/mode/xml/xml.js')
  require('codemirror/mode/javascript/javascript.js')
  require('codemirror/lib/codemirror.css')
  require('codemirror/addon/lint/lint.js')
  require('codemirror/addon/lint/lint.css')
  require('codemirror/addon/lint/json-lint')
  require('codemirror/addon/lint/javascript-lint.js')
  require('codemirror/addon/hint/javascript-hint.js')
  window.jsonlint = require('jsonlint-mod')
}

export default {
  data () {
    return {
      xmlInput: '',
      jsonInput: '',
      xmlEditor: null,
      jsonEditor: null
    }
  },
  mounted () {},
  methods: {
    convertToJSON () {
      // Make the textarea as CodeMirror beautified XML
      if (this.xmlEditor === null) {
        this.xmlEditor = CodeMirror.fromTextArea(document.getElementById('xml'), {
          mode: 'application/xml',
          lineNumbers: true,
          indentWithTabs: true,
          gutters: ['CodeMirror-lint-markers'],
          lint: true,
          autoCloseBrackets: true,
          autoCloseTags: true
        })

        this.xmlEditor.setValue(document.getElementById('xml').value)
      } else {
        this.xmlEditor.setValue(document.getElementById('xml').value)
      }
    },
    convertToXML () {
      // Make the textarea as CodeMirror beautified JSON
      if (this.jsonEditor === null) {
        this.jsonEditor = CodeMirror.fromTextArea(document.getElementById('json'), {
          mode: 'applicaton/ld+json',
          lineNumbers: true,
          lineWrapping: true,
          autoCloseBrackets: true,
          gutters: ['CodeMirror-lint-markers'],
          lint: true
        })
        this.jsonEditor.setValue(document.getElementById('json').value)
      } else {
        this.jsonEditor.setValue(document.getElementById('json').value)
      }
    },
    resetArea () {
      // Remove the CodeMirror and make it normal textarea
      if (this.xmlEditor !== null) {
        document.getElementById('xml').value = ''
        this.xmlEditor.setValue('')
        this.xmlEditor.toTextArea()
        this.xmlEditor = null
      }

      if (this.jsonEditor !== null) {
        document.getElementById('json').value = ''
        this.jsonEditor.setValue('')
        this.jsonEditor.toTextArea()
        this.jsonEditor = null
      }
    }
  }
}
</script>

<style scoped>
textarea {
  height: 78vh;
  white-space: nowrap;
  resize: both;
}

::-webkit-input-placeholder {
  color: #f1948a;
  text-align: center;
}

.CodeMirror {
  height: 78vh !important;
  position: relative !important;
  overflow: hidden !important;
  border: 1px solid black;
}
</style>