JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <span ref="countSpan">{{ count }}</span>
  <div @click="divClick">
    <button @click="buttonClick">
      Click me
    </button>
  </div>
</div>

JavaScript

Vue.createApp({
  data () {
    return {
      count: 0
    }
  },
  
  methods: {
    divClick () {
      console.log('div click event: ' + this.$refs.countSpan.innerText)
    },
    
    async buttonClick () {
      console.log('initial innerText: ' + this.$refs.countSpan.innerText) 
      this.count++
      console.log('after count updated: ' + this.$refs.countSpan.innerText)
      await this.$nextTick()
      console.log('next tick: ' + this.$refs.countSpan.innerText)
    }
  }
}).mount('#app')