Two way data binding VueJs

dynamicfields.vue

<div id="vue">
  <h2>These are some examples of how to do two-way bindings</h2>
  <child v-model="stuff"></child>
  {{stuff}}
  <hr>
  <selector v-model="selected"></selector>
  {{selected}}
  <hr>
  <multi-sync :first_name.sync="user.first_name" :last_name.sync="user.last_name"></multi-sync>
  {{user}}
  <hr>
  <multi-field v-model="user2"></multi-field>
  {{user2}}
</div>
    
    new Vue({
  el: '#vue',
  data() {
    return {
      stuff: 'Hello Vue!',
      selected: [],
      user: {
        first_name: 'Simon',
        last_name: 'Herteby'
      },
      user2: {
        first_name: 'Evan',
        last_name: 'You'
      }
    }
  },
  components: {
    child: {
      props: ['value'],
      template: `<input v-model="interface">`,
      computed: {
        interface: {
          get() {
              return this.value
            },
            set(val) {
              this.$emit('input', val)
            }
        }
      }
    },
    selector: {
      props: {
        value: {
          type: Array,
          default: [] //value for multi-select must be array, not undefined
        }
      },
      template: `
        <select v-model="interface" multiple>
         <option>A</option>
         <option>B</option>
         <option>C</option>
        </select>`,
      computed: {
        interface: {
          get() {
              return this.value
            },
            set(val) {
              this.$emit('input', val)
            }
        }
      }
    },
    multiSync:{
    	props:['first_name','last_name'],
      template: `
        <div>
          <input v-model="sync_first_name">
          <input v-model="sync_last_name">
        </div>`,
      computed:{
      	sync_first_name: {
          get() {
              return this.first_name
            },
            set(val) {
              this.$emit('update:first_name', val)
            }
        },
        sync_last_name: {
          get() {
              return this.last_name
            },
            set(val) {
              this.$emit('update:last_name', val)
            }
        }
      }
    },
    multiField: {
      props: {
        value: {
          type: Object,
          default: {
            first_name: '',
            last_name: ''
          }
        }
      },
      template: `
        <div>
          <input v-model="buffer.first_name" @input="$emit('input', buffer)">
          <input v-model="buffer.last_name" @input="$emit('input', buffer)">
        </div>`,
      data() {
        return {
          buffer: Object.assign({}, this.value) //object.assign only works for shallow objects. for nested objects, use something like _.cloneDeep
        }
      },
      watch: {
        value: {
          handler() {
            this.buffer = Object.assign({}, this.value)
          },
          deep: true
        }
      }
    }
  }
})
// https://forum.vuejs.org/t/proper-way-of-two-way-data-binding/18508
// Source : https://forum.vuejs.org/t/proper-way-of-two-way-data-binding/18508