JSFiddle - React, Tailwind, and code Playground

by leopoldthecuber

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<div id="app">

</div>

Babel + JSX

Vue.component('my-component', {
  props: {
    value: Number,
    options: {
      type: Array,
      default() {
        return []
      }
    }
  },
  methods: {
    handleClick(option) {
      this.$emit('input', option);
    }
  },
  template: `
    <div>
      <span>{{value}}</span>
      <p v-for="option in options" @click="handleClick(option)">option</p>
    </div>
  `
});

var App = Vue.extend();

new App({
  el: '#app',
  data() {
    return {
      visible: false
    }
  },
  template: `
    <div>
      <div v-show="visible">
        <my-component><my-component>
      </div>    
    </div>
  `
})