JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

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

JavaScript

const { createApp, h } = Vue

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

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

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

  watch: {
    value: {
      flush: 'pre',
    
      handler () {
        console.log('value watch')
        this.otherValue++
      }
    },

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

const app = createApp({
  components: {
    ChildComponent
  },

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

app.mount('#app')