JSFiddle - React, Tailwind, and code Playground

by Alexey Ryazhskikh

HTML

<div id="app">
  <doggie :size.sync="size" :color.sync="color"></doggie>
  <br/>
  <input v-model="size"/>
  <input v-model="color"/>
</div>

JavaScript

Vue.component('doggie', {
  template: `
    <div>
      <h1>The {{size}}, {{color}} dog chased me {{test1}}</h1>
      <input :value="size" @input="$emit('update:size', $event.target.value)" />
      <input :value="color" @input="$emit('update:color', $event.target.value)" />
    </div>
  `,
  props: ['size', 'color'],
  
})

new Vue({
  el: '#app',
  data: {
    size: 'big',
    color: 'brown'
  },
  mounted() {
    const vm = this;

  }
})