JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <button @click="outer++">
    Button 1
  </button>
  <my-child :my-prop="outer"></my-child>
</div>

JavaScript

const MyChild = {
  template: `
    <div>
      {{ myProp }} - {{ track() }}
      <button @click="inner++">Button 2</button>
    </div>
  `,
  
  props: ['myProp'],
  
  data () {
    return {
      inner: 0
    }
  },
  
  methods: {
    track () {
      console.log('rendering')
      return ''
    }
  },
  
  watch: {
    myProp () {
      console.log(this.inner)
    }
  }
}

Vue.createApp({
  components: {
    MyChild
  },
  
  data () {
    return {
      outer: 0
    }
  }
}).mount('#app')