JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <child-component :value="count"></child-component>
  <button @click="count++">Increment</button>
</div>

JavaScript

const ChildComponent = {
  props: ['value'],

  data () {
    return {
      otherValue: 0
    }
  },

  render (h) {
    console.log('render')
    return h('div', this.value)
  },

  watch: {
    value: {
      handler () {
        console.log('value watch')
        this.otherValue = Date.now()
      }
    },

    otherValue: {
      handler () {
        console.log('otherValue watch')
      }
    }
  }
}

const app = new Vue({
  components: {
    ChildComponent
  },

  data () {
    return {
      count: 0
    }
  }
})

app.$mount('#app')