VueCodemirror.vue

<template>
    <textarea ref="codemirror"></textarea>
</template>

<script>
export default {
    model: {
        event: 'input',
        prop: 'value',
    },

    data () {
        return {
            instance: null,
        };
    },

    props: {
        value: {
            type: String,
        },
        
        options: {
            type: Object,
            default () {
                return {
                    tabSize: 2,
                    lineNumbers: true,
                    lineWrapping: false,
                    line: true,
                };
            },
        },
        
        modes: {
            type: Array,
            default () {
                return ['htmlmixed'];
            },
        },
    },

    mounted () {
        this.$nextTick(() => {
            this.$codemirror.load({
                modes: this.modes,
            }).then((CodeMirror) => {
                this.instance = CodeMirror.fromTextArea(this.$refs.codemirror, this.options);

                this.instance.setValue(this.value);

                this.instance.on('change', () => {
                    this.$emit('input', this.instance.getValue());
                });
            });
        });
    },

    methods: {
        setValue (value) {
            if (this.instance) {
                this.instance.setValue(value);
                this.refresh();
            }
        },
        
        refresh () {
            this.$nextTick(() => {
                this.instance.refresh();
            });
        },
    },

    watch: {
        value () {
            this.setValue(this.value);
        },
    },
};
</script>