在vue中加载所有脚本后调用javascript函数

Question

我正在尝试使用Vue实现在VanillaJS中所做的事情。

我使用beforeMount（）加载了与该元素相关的所有脚本，然后调用了启动该元素的函数。但它仍然说

CodeMirror is not defined

这是我的下面的代码

Test = {};

Test.VueComponents = {

init: function () {

    // Vue vootstrap toggle input, effectively a re-styled checkbox
    Vue.component('test', {
        template: '<div class="form-group"><label>Basic styles</label><textarea id="basic" name="basic"></textarea></div>',
        mounted: function() {
            console.log('mounted');

        },
        ready() {
              this.InitiateCodeMirror();  
        },
         beforeMount(){
            this.Script1();
            this.Script2();
            this.Script3();
            this.Script4();
            this.Script5();
            this.Script6();
            this.Script7();
         },
        methods: {
            Script1: function() {
              return new Promise((resolve, reject) => {
               let script = document.createElement('script')
               script.setAttribute('src','../../../../../codemirror/lib/codemirror.js')
               console.log("S1")
               document.head.appendChild(script)
              })
             },
             Script2: function() {
              return new Promise((resolve, reject) => {
               let script = document.createElement('script')
                                  script.setAttribute('href','../../../../../codemirror/lib/codemirror.css')
               console.log("S2")
               document.head.appendChild(script)
              })
             },
             Script3: function() {
              return new Promise((resolve, reject) => {
               let script = document.createElement('script')
               script.setAttribute('href','../../../../../codemirror/addon/hint/show-hint.css')

               console.log("S3")
               document.head.appendChild(script)
              })
             },
             Script4: function() {
              return new Promise((resolve, reject) => {
               let script = document.createElement('script')
               script.setAttribute('src','../../../../../codemirror/mode/css/css.js')
               console.log("S4")
               document.head.appendChild(script)
              })
             },
             Script5: function() {
              return new Promise((resolve, reject) => {
               let script = document.createElement('script')
               script.setAttribute('src','../../../../../codemirror/addon/hint/show-hint.js')
               console.log("S5")
               document.head.appendChild(script)
              })
             },
             Script6: function() {
              return new Promise((resolve, reject) => {
               let script = document.createElement('script')
               script.setAttribute('src','../../../../../codemirror/addon/hint/css-hint.js')
               console.log("S6")
               document.head.appendChild(script)
              })
             },
             Script7: function() {
              return new Promise((resolve, reject) => {
               let script = document.createElement('script')
               script.setAttribute('src','../../../../../codemirror/mode/css/scss_test.js')
               console.log("S7")
               document.head.appendChild(script)
              })
             },

             InitiateCodeMirror: function() {
                var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("basic"), {
                    lineNumbers: true,
                    indentUnit: 4
                });
                var myCodeMirror = CodeMirror.fromTextArea(document.getElementById("media"), {
                        lineNumbers: true,
                        indentUnit: 4
                });
            }
        },
    });
}
}

$(document).ready(function(){
console.log('ready')
Test.VueComponents.init();
});

尽管我在每个脚本调用内部编写的S1 S2 S3的控制台日志都显示在控制台中，并且在“网络”选项卡中检查脚本时也会加载脚本。