Vue.js - child component status

Child.vue

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

<script>
export default {
  props: {
    name: {
      type: String,
      required: true
    },
    // validation data
    isInvalid: {
      type: Boolean,
      required: true
    }
  },
  watch: {
    // update validation data
    name() {
      this.updateIsInvalid()
    }
  },
  created() {
    // init validation data
    this.updateIsInvalid()
  },
  methods: {
    onInput(val) {
      this.$emit('update:name', val)
    },
    updateIsInvalid() {
      const isInvalid = name === ''
      this.$emit('update:isInvalid', isInvalid)
    }
  }
}
</script>

index.vue

<template>
  <Child :name.sync="name" :is-invalid.sync="isInvalid" />
</template>

<script>
export default {
  data() {
    return {
      name: '',
      isInvalid: false
    }
  }
}
</script>