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-form v-model="myThing"></my-form>
  {{ myThing }}
</div>

JavaScript

const MyForm = {
  template: `
    <div>
      <input v-model="formData.name">
      <input v-model="formData.age">
      <input v-model="formData.id">
      <input v-model="formData.etc">
    </div>
  `,
  
  props: ['modelValue'],
  emits: ['update:modelValue'],
  
  computed: {
    formData () {
      const vm = this
      
      return new Proxy(vm.modelValue, {
        set (obj, key, value) {
          vm.$emit('update:modelValue', { ...obj, [key]: value })
          return true
        }
      })
    }
  }
}

Vue.createApp({
  components: {
    MyForm
  },

  data () {
    return {
      myThing: {
        name: 'Hi',
        age: '34',
        id: 'asdfg',
        etc: '123erty'
      }
    }
  }
}).mount('#app')