Vue get/set interface

HTML

<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}}
  
  <h2>
    {{getString}}
  </h2>
</div>

JavaScript

new Vue({
  el: '#vue',
  computed: {
  	getString(){
    	var s = 'Faizan'
      return s.split('')
    }
  },
  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: ''
          }
        }
      },
     ...