vueでv-modelをネストして使いたい

親Component

<template>
  <child-component
    v-model="text"
  />
</template>

<script>
export default {
  data() {
    return {    
      text: ''
    }
  }
}
</script>

child-component

<template>
  <mago-component
    v-model="localValue"
  />
</template>

<script>
export default {
  props: {
    value: {
      type: String
    }
  },
  computed: {
    localValue: {
      get() {
        return this.value
      },
      set(value) {
        this.$emit('input', value)
      }
    }
  }
}
</script>

子Componentでgetterとsetterを指定してあげればよかった。

これで無限にネストできる。

参考
コンポーネントで-v-model-を使う