JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.7.0/codemirror.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.7.0/codemirror.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.7.0/mode/javascript/javascript.min.js"></script>
<div id="app">
    <codemirror v-if="displayEditor" :code="code"></codemirror>
    <div v-else>Loading data...</div>
</div>

CSS

codemirror {
    display: block;
}

JavaScript

var CodeMirrorComponent = Vue.extend({
    template: '<div></div>', // will replace <codemirror> tag
    props: ['code'],
	ready: function () {
    	// wait that Vue.js render the element in the DOM
    	this.$nextTick(this.initCodeMirror);
	},
	methods: {
    	initCodeMirror: function () {
    		var vm = this;

    		// Launch the plugin with the options
            var cm = CodeMirror(vm.$el, {
                mode: 'javascript',
                lineNumbers: true
            });

            // Set the initial value
            cm.setValue(this.code);
		}
	}
});
Vue.component('codemirror', CodeMirrorComponent);

new Vue({
    el: '#app',
    data: {
        displayEditor: false,
        code: undefined
    },
    ready: function () {
        var vm = this;
        setTimeout(function () {
            // Data fetched
            vm.code = 'var foo = "bar";';
            vm.displayEditor = true;
        }, 1500);
    }
});