JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

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

JavaScript

const MyChild = {
  template: `<button @click="onClick">Click me ({{ value }}) ({{ otherValue }})</button>`,
  props: ['otherValue'],
  
  data () {
    return {
      value: 0
    }
  },
  
  methods: {
    onClick () {
      this.value++
    }
  },
  
  updated () {
    console.log('updated')
  },
  
  watch: {
    value () {
      //this.$nextTick(() => {
        this.$emit('some-event', this.value)
      //})
    }
  }
}

const App = {
  template: `<div><my-child :other-value="myValue" @some-event="myValue = $event"></my-child></div>`,
  components: {
    MyChild
  },
  data () {
    return {
      myValue: 0
    }
  }
}

var watchExampleVM = new Vue({
  el: '#event-example',
  render (h) {
    return h(App)
  }
})