JSFiddle - React, Tailwind, and code Playground

HTML

<!-- it worked -->
<script src="https://cdn.jsdelivr.net/vue/1.0.17/vue.min.js"></script>

<!-- it dosen't work
<script src="https://cdn.jsdelivr.net/vue/1.0.18/vue.min.js"></script>
-->

<div class="app">
    <component is="test" v-props="objs"></component>
</div>

Babel + JSX

Vue.directive('props', {
		priority: 3000,
    bind() {
    
        // set the last component child as the current
        let comp = this.vm.$children[this.vm.$children.length - 1];
        let values = null;
        if(this._scope && this._scope.$eval) {
            values = this._scope.$eval(this.expression);
        } else {
            values = this.vm.$eval(this.expression);
        }
        if(typeof values !== 'object' || values instanceof Array) {
            values = { data: values };
        }

        // apply properties to component data
        for(let key in values) {
            if(values.hasOwnProperty(key)) {
                let hkey = this.hyphenate(key);
                let val = values[key];
                if(typeof val === 'string') {
                    comp.$options.el.setAttribute(hkey, values[key]);
                } else {
                    comp.$options.el.setAttribute(':' + hkey, values[key]);
                }
            }
        }
        
				console.log(comp.$options.el.outerHTML);
        comp._initState();
    },

    /*
     * Hyphenate a camelCase string.
     */
    hyphenate(str) {
        let hyphenateRE = /([a-z\d])([A-Z])/g;
        return str.replace(hyphenateRE, '$1-$2').toLowerCase();
    }
});

Vue.component('test', {
	props: [ 'p' ],
  template: "<b>{{p}}</b>",
  ready() {
  	// should alert 'ok'.
  	alert(this.p);
  }
})

new Vue({
	el: '.app',
  data: {
  	objs: {
    	p: 'ok'
    }
  }
});