Quick & Dirty: Vue.js (vueify) wrapper for Ace editor

editor.vue

<template>
    <!-- Languages -->
    <div class="Editor__Languages">
        <button @click.prevent="changeHighlight"
            data-style="ace/mode/markdown"
            class="btn btn-xs  btn-primary">.md</button>
        <button @click.prevent="changeHighlight"
            data-style="ace/mode/php"
            class="btn btn-xs">.php</button>
        <button @click.prevent="changeHighlight"
            data-style="ace/mode/sql"
            class="btn btn-xs">.sql</button>
        <button @click.prevent="changeHighlight"
            data-style="ace/mode/javascript"
            class="btn btn-xs">.js</button>
        <button @click.prevent="changeHighlight"
            data-style="ace/mode/css"
            class="btn btn-xs">.css</button>
        <button @click.prevent="changeHighlight"
            data-style="ace/mode/html"
            class="btn btn-xs">.html</button>
        <button @click.prevent="changeHighlight" 
            data-style="ace/mode/sh"
            class="btn btn-xs">.sh</button>
        <button @click.prevent="changeHighlight"
            data-style="ace/mode/c_cpp"
            class="btn btn-xs">.cpp</button>
    </div>

    <div id="snippet-editor" 
        class="Editor col-md-12"><slot># Write something awesome!</slot></div>
</template>

<script>

    export default {
        name: 'snippet-editor',
        props: [],

        data() {
            return {
                editor: null,
                themeButtons: null,
            }
        },

        ready() {
            this.editor = ace.edit('snippet-editor');
            this.editor.setTheme('ace/theme/twilight');
            this.editor.getSession().setMode('ace/mode/markdown');

            this.themeButtons = document.querySelectorAll('.Editor__Languages button');
        },

        methods: {
            changeHighlight(event) {
                const target = event.target;
                const theme = target.getAttribute('data-style');

                this.editor.session.setMode(theme);
                console.log(this.themeButtons);
                [...this.themeButtons].forEach( button => button.classList.remove('btn-primary') );
                target.classList.add('btn-primary');
            }
        },
    }
</script>

<style>
    .Editor {
        height: 250px;
    }
    .Editor__Languages {
        padding-bottom: 1em;
    }
</style>

main.js

// bootstrap Ace editor
// remember to `npm install ace-builds -S`
require('./../../../../node_modules/ace-builds/src-min/ace');
require('./../../../../node_modules/ace-builds/src-min/theme-twilight');
require('./../../../../node_modules/ace-builds/src-min/mode-markdown');
require('./../../../../node_modules/ace-builds/src-min/mode-php');
require('./../../../../node_modules/ace-builds/src-min/mode-sql');
require('./../../../../node_modules/ace-builds/src-min/mode-javascript');
require('./../../../../node_modules/ace-builds/src-min/mode-css');
require('./../../../../node_modules/ace-builds/src-min/mode-html');
require('./../../../../node_modules/ace-builds/src-min/mode-sh');
require('./../../../../node_modules/ace-builds/src-min/mode-c_cpp');