Vue.js - data flow

Child.vue

<template>
  <Grandchild
    :name="name"
    @input="updateData('name', $event)"
  />
</template>

<script>
import Grandchild from '~/components/Grandchild'
export default {
  components: {
    Grandchild
  }
  props: {
    name: {
      type: String,
      required: true
    }
  },
  methods: {
    updateData(key, val) {
      this.$emit(`update:${key}`, val)
    }
  }
}
</script>

Grandchild.vue

<template>
  <input
    type="text"
    :value="name"
    @input="onInput"
  />
</template>

<script>
export default {
  props: {
    name: {
      type: String,
      default: ''
    }
  },
  methods: {
    onInput(val) {
      this.$emit('input', val)
    }
  }
}
</script>

index.vue

<template>
  <Child :name.sync="name" />
</template>

<script>
import Child from '~/components/Child'
export default {
  components: {
    Child
  },
  data() {
    return {
      name: '田中'
    }
  }
}
</script>