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-child placeholder="Something" v-model="text"></my-child>
  {{ text }}
</div>

JavaScript

const app = Vue.createApp({
  components: {
    MyChild: {
      inheritAttrs: false,
      template: `
        <div>
          <textarea v-bind="$attrs" v-model="inputValue"></textarea>
        </div>
      `,
      props: ['modelValue'],
      emits: ['update:modelValue'],
      
      computed: {
        inputValue: {
          get () {
            return this.modelValue
          },
          set (value) {
            this.$emit('update:modelValue', value)
          }
        }
      }
    }
  },
  
  data () {
    return {
      text: 'Hello'
    }
  }
})

app.mount('#app')