JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

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

JavaScript

const MyChild = {
  template: `<div>{{ track(otherValue) }}</div>`,
  props: ['otherValue'],
  
  data () {
    return {
      value: 0
    }
  },
  
  updated () {
    console.log('updated')
  },
  
  watch: {
    otherValue () {
      debugger
      console.log('watch')
    }
  },
  
  methods: {
    track (value) {
      console.log('child rendering')
      return value
    }
  }
}

const App = {
  template: `<div><button @click="myValue++">Go</button><my-child :other-value="track(myValue)"></my-child></div>`,
  components: {
    MyChild
  },
  data () {
    return {
      myValue: 0
    }
  },
  methods: {
    track (value) {
      console.log('parent rendering')
      return value
    }
  }
}

var watchExampleVM = Vue.createApp(App).mount('#event-example')