JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app"></div>

CSS

#app {
  border: 1px dotted red;
}

JavaScript

const Child = {
  props: ['user', 'other'],

  render () {
    console.log('child render')
    //debugger
    return Vue.h('div', this.user + ' : ' + this.other)
  },
  
  watch: {
    other: {
      flush: 'sync',
    
      handler () {
        console.log('watch other: ' + this.user + ' : ' + this.other)
      }
    },
  
    user: {
      flush: 'sync',
    
      handler () {
        // debugger
        console.log('watch user: ' + this.user + ' : ' + this.other)
      }
    }
  }
}

const app = Vue.createApp({
/*   render () {
    //debugger
    return Vue.h('div', [Vue.h(Child, {  })])
  },
   */
   
  template: `
    <div>
      <button @click="admin += '!'">Click</button>
      <child :user="admin" :other="admin"></child>
    </div>
  `,
  
  components: {
    Child
  },
  
  data () {
    return {
      admin: 'Bob'
    }
  },
  
  beforeMount () {
    //debugger
  },
  
  beforeUpdate () {
    //debugger
  }
})

app.mount('#app')