JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <my-child :a="count" :b="b"></my-child>
  <button @click="count++">
    Increment {{ count }}
  </button>
</div>

JavaScript

const MyChild = {
  template: `
  	<input v-model="b.name">
    {{ b.name }}
  `,

  props: {
    a: Number,
    b: {
      type: Object,
      default () {
        return Vue.reactive({ name: 'default' })
      }
    }
  }
}

Vue.createApp({
  components: {
    MyChild
  },
  
  data () {
    return {
      count: 0,
      b: undefined
    }
  }
}).mount('#app')