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="id"></child-component>
  <button @click="id++">Increment</button>
</div>

JavaScript

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

  // template: `<div></div>`,
  //
  // updated () {
  //   console.log('updated')
  // },

  render (h) {
    // debugger
    console.log('render')
    return h('div', [
      h('button', {
        onClick: () => {
          console.log('Updating inner')
          this.inner++
        }
      }, 'Inner increment')/*,
      this.value*/
    ])
  },

  data () {
    return {
      inner: 0
    }
  // },
  //
  // watch: {
  //   value: {
  //     flush: 'pre',
  //
  //     handler () {
  //       console.log(`watch: ${this.inner}`)
  //     }
  //   }
  }
}

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

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

app.$mount('#app')