vue 组件递归如何实现 输入框的双向绑定？

https://codesandbox.io/s/great-solomon-x7x3x

// app --- start
<template>
  <div id="app">
    <form @submit.prevent="handleSubmit">
      <InputTree v-model="treeData" />
      <button type="submit">确认</button>
    </form>
  </div>
</template>

<script>
import InputTree from "./components/InputTree.vue";

const getOnlineData = () => 
  new Promise(resolve => {
    resolve({
      data: [
        {
          label: "level-1-1",
          value: "1-1",
          children: [
            {
              label: "level-2-1",
              value: "2-1",
              children: [
                {
                  label: "level-3-1",
                  value: "3-1"
                }
              ]
            }
          ]
        },
        {
          label: "level-1-2",
          value: "1-2"
        }
      ]
    })
  });
  
export default {
  name: "App",
  components: {
    InputTree
  },
  data() {
    return {
      treeData: []
    };
  },
  created() {
    this.getData()
  },
  methods: {
    handleSubmit() {
      console.log(JSON.stringify(this.treeData));
    },
    getData() {
      getOnlineData().then(({ data }) => {
        this.treeData = data;
      });
    }
  }
};
</script>
// app ---- end

// ./components/InputTree.vue  ---- start
<template>
  <div>
    <div class="tree-item" v-for="(item, index) in value" :key="index">
      <label>{{ item.label }}</label>
      <input v-model="item.value">
      <input-tree v-if="item.children" v-model="item.children" />
    </div>
  </div>
</template>

<script>
export default {
  name: "input-tree",
  props: ["value"]
}
</script>

<style scoped>
.tree-item {
  padding-left: 20px;
}
</style>
// ./components/InputTree.vue  ---- end

没太明白