Basecamp Trix-Editor VueJS 2.0 v-model 2 way binding

gistfile1.js

let _ = require('lodash');

Vue.component('wysiwyg', {
    props: ['value'],
    template: '<div></div>',

    data() {
        return {
            trix: null,
            id: ''
        }
    },

    mounted() {
        this.id = _.sampleSize('ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789', 5).join('');

        this.trix = $(`<trix-editor input="${this.id}"></trix-editor>`);

        let self = this;

        this.trix.on('trix-change', (e) => {
            self.$emit('input', e.currentTarget.innerHTML)
        });

        this.$watch('value', function(value) {
            value = value === undefined ? '' : value;
            if (self.trix[0].innerHTML !== value) {
                self.trix[0].editor.loadHTML(value);
            }
        });

        this.trix.insertAfter(this.$el);
    },
});



//Usage:

<wysiwyg v-model="createBlogForm.title" />