Vue custom input

FullNameEditor.vue

<template>
  <div>
    <p>
      First name:<br>
      <input v-model="first" @input="handleNameChange">
    </p>
    <p>
      Last name:<br>
      <input v-model="last" @input="handleNameChange">
    </p>
  </div>
</template>

<script>
  export default {
    name: 'FullNameEditor',
    data () {
      return this.splitName()
    },
    props: {
      value: {
        type: String,
        required: false,
        default: 'John Doe'
      }
    },
    methods: {
      splitName () {
        const [first = '', last = ''] = this.value.split(' ')
        return {first, last}
      },
      joinName () {
        return [this.first, this.last].join(' ').trim()
      },
      handleNameChange () {
        this.$emit('input', this.joinName())
      }
    },
    watch: {
      value () {
        const {first, last} = this.splitName()
        this.first = first
        this.last = last
      }
    }
  }
</script>

index.vue

<template>
  <div>
    <p>
      Full name<br>
      <input v-model="fullName">
    </p>
    <FullNameEditor v-model="fullName" />
  </div>
</template>

<script>
  import FullNameEditor from './FullNameEditor'

  export default {
    components: { FullNameEditor },
    data () {
      return {
        fullName: 'Riki Fridrich'
      }
    }
  }
</script>