Using CodeMirror with Vuejs/Nuxtjs results in error 'CodeMirror' is not defined

1

I am implementing the CodeMirror to one of the textarea in my Nuxtjs/Vuejs application. I would like to beautify the textarea as per the XML.

Sometimes the CodeMirror works perfectly but sometimes when I reload the page I get the error:

Test.vue
33:18  error  'CodeMirror' is not defined  no-under

So initially it works perfectly but when I try to make some changes to any file in the project and when the Nuxtjs/Vuejs server reloads again to incorporate the new changes then I get the error error 'CodeMirror' is not defined

I am not understanding why do I get the error sometimes and I do not get it some other time. As I have added the required CDN and done the steps mentioned in various answers and articles, I would expect that it does not throw the error at all. Can someone please help me with this issue?

Steps followed:

  1. Added the CDN to my nuxt-config.js:
    Scripts:
    script: [
      {
        src:"text/javascript",
        src:"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/codemirror.min.js"
      },
      {
        src:"text/javascript",
        src:"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.32.0/mode/xml/xml.min.js"
      }
    ],

CSS:

{
 rel: "stylesheet",
 href:"https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.63.1/codemirror.min.css"
}

Following is my Test.vue:

<template>
  <div>
    <div class="row">
      <div class="col-md-5">
        <div class="row">
          <div class="col-md-12">
            <textarea
              id="test"
              v-model="xmlInput"
              rows="4"
              cols="10"
              class="form-control"
              placeholder="XML Document"
              spellcheck="false"
              data-gramm="false"
              @input="convertToJSON()"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      xmlInput: '',
      cm: ''
    }
  },
  mounted () {
    console.log('MOUNTED')
  },
  methods: {
    convertToJSON () {
      console.log('CONVERT METHOD')
      this.cm = CodeMirror.fromTextArea(document.getElementById('test'), {
        mode: 'application/xml',
        tabMode: 'indent',
        lineNumbers: true,
        matchBrackets: true,
        styleActiveLine: true,
        lineWrapping: true,
        indentUnit: 2
      }).setSize('100%', '100%')
    }
  }
}
</script>

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

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

#test {
  overflow-y: auto;
  overflow-x: scroll;
  line-height: 1em;
  font-family: monospace;
  border: 1px solid #eee;
  height: 78vh;
  width:auto;
  white-space: nowrap;
  resize: both;
}
</style>

Can someone please help me out with this issue? What am I doing wrong here? Any suggestions would be really appreciated. Thanks in advance.