JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app"></div>



<!-- Importing libs and setup -->
<script src="https://unpkg.com/vue@latest/dist/vue.js"></script>
<script src="https://unpkg.com/vue-class-component@latest/dist/vue-class-component.js"></script>
<script>
var s = document.querySelector('script[type="text/babel"]')
s.setAttribute('data-presets', 'stage-2')
s.setAttribute('data-plugins', 'transform-decorators-legacy,transform-class-properties')
window.Component = VueClassComponent.default
</script>

Babel + JSX

function Props() {
  return function (target, name, descriptor) {
  	const fn = descriptor.initializer
    descriptor.initializer = undefined
  
    return VueClassComponent.createDecorator((options, key) => {
      if (typeof options.props !== 'object') {
      console.log('hello')
      window.console.log('hellw')
        options.props = Object.create(null)
      }
      if (typeof options._props !== 'object') {
        options._props = Object.create(null)
      }
      
      options.props[key] = fn()
      
    })(target, name);
  }
}

@Component({
  template: '<p>{{ abcd }}</p>'
})
class App extends Vue {
  @Props()
  abcd = {default: 'ABCDE'}
}

const vm = new Vue({
  el: '#app',
  render: h => h(App)
})