JSFiddle - React, Tailwind, and code Playground

by skirtle

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<div id="app">
  <edit-form :data.sync="formData"></edit-form>
  {{ formData }}
</div>

JavaScript

const EditForm = {
  template: `
    <form>
      <input v-model="inputData.name1">
      <input v-model="inputData.name2">
      <input v-model="inputData.name3">
    </form>
  `,
  
  props: ['data'],
  
  computed: {
    inputData () {
      return new Proxy(this.data, {
      	set: (obj, prop, value) => {
          this.$emit('update:data', { ...this.data, [prop]: value })
          return true
        }
      })
    }
  }
}

new Vue({
  components: {
    EditForm
  },

  data () {
    return {
      formData: {
        name1: 'Abc',
        name2: 'Def',
        name3: 'Ghi'
      }
    }
  }
}).$mount('#app')