JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.global.js"></script>
<div id="app">
  <my-input v-model="text"></my-input>
</div>

JavaScript

const MyInput = {
  template: `
    <input v-model="inputValue">
  `,
  
  props: ['modelValue'],
  emits: ['update:modelValue'],
  
  computed: {
    inputValue: {
      get () {
        return this.modelValue
      },
      set (value) {
        this.$emit('update:modelValue', value)
      }
    }
  }
}

Vue.createApp({
  components: {
    MyInput
  },
  
  data () {
    return {
      text: 'hello'
    }
  },
  
  watch: {
    text () {
      console.log('Text is now: ' + this.text)
    }
  }
}).mount('#app')