JSFiddle - React, Tailwind, and code Playground

by ktsn

HTML

<script src="https://unpkg.com/vue@next"></script>
<div id="app">
  <transition v-bind="props">
    <div>mode: {{ props }}</div>
  </transition>
</div>

JavaScript

const { ref, watch, createApp, nextTick } = Vue

const props = ref({})

watch(props, () => {
  console.log('Direct ref watch callback')
})

const App = {
	setup() {
    return {
    	props
    }
  },
  
  mounted() {
    watch(() => this.props, () => {
      console.log('In component watch callback')
    })
  }
}

const root = createApp(App).mount('#app')
props.value = { mode: 'in-out' }