JSFiddle - React, Tailwind, and code Playground

by webxl

HTML

<div id="app">
  <doggie v-bind.sync="appdog" />
</div>

JavaScript

Vue.component('doggie', {
  template: `
    <div>
      <h1>The {{size}}, {{color}} dog chased me</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: {
    appdog: { 
    	size: 'big',
    	color: 'brown'
    }
  },
  mounted() {
    const vm = this
    setInterval(() => { console.log('size', this.appdog.size, 'color', this.appdog.color); }, 3000);
  }
})