This is a quick example that shows how to wrap an oojs-ui component in a Vue component. It's nasty because of the lack of componentization of oojs-ui, but it's just a proof of concept.

OojsUiCheckBoxInputWidget.vue

<template>
<!-- In Vue, $el is this root element defined in the template section -->
<span></span>
</template>

<script>
// the script-loader webpack plugin has to be used to hack the oojs-ui files directly into script tags
// because they have no modularization whatsoever (AMD, ES6, etc.)
import 'script-loader!oojs/dist/oojs.jquery'
import 'oojs-ui/dist/oojs-ui-core'
import 'script-loader!oojs-ui/dist/oojs-ui-mediawiki'

export default {
    name: 'oojs-ui-checkbox',
    props: [ 'selected' ],
    data () {
        return {
            checkbox: new OO.ui.CheckboxInputWidget({ selected: this.selected })
        }
    },
    mounted () {
        var self = this

        // This just worked in the few minutes I had to put it together, but
        // I found out later that this.checkbox.$element is a jQuery thing so
        // in theory it could be made a little nicer
        this.$el.append(this.checkbox.$element[0])
        this.checkbox.on('change', function () {
            // This gets listened to in the parent with something like:
            //   <oojs-ui-checkbox :selected="bv.on" @update="updateCheck($event, bv)"/>
            // even though :selected.sync should work in Vue 2.3+, didn't have time to debug
            // Here, bv is just a local with a boolean field called "on"
            self.$emit('update', self.checkbox.isSelected())
        })
    }
}

</script>

<style src="../assets/oojs-ui-core-mediawiki.min.css"></style>
... for this style reference to work I had to symlink the css but it would be better
... to use webpack and import it via JS or something nicer like that.