v-modelのcomputedを動的に定義する方法

オブジェクトをコンポーネントにバインドする時に困ったことがありました。
例えば以下の様な例で考えてみます。

この例ではコンテナ層とプレゼンテーション層でフォームデータをバインドしています。
今回はdataとしてpostFormオブジェクトを定義しており、項目数は２つです。

PostConatainer.vue

<script>

import Post from '../../components/Post/Post.vue'

export default {
  components:{
    Post,
  },
  data(){
    return {
      postForm:{
        name: null,
        photo: null
      }
    }
  },
  render: function(createElement){
    return createElement(Post,{
      props:{
        value: this.postForm
      },
      on: {
        "input" : ($event) => { this.postForm = $event },
      },
    })
  }

}

</script>

propsとして受け取ったPost.vueではフォーム項目をcomputedのプロパティとして定義しています。
でもこれ仮に項目数が100個に増えると、computedの定義も100個にしなければいけないと思いませんか？

Post.vue

<template>
  <div class="form">
    <el-form ref="form" label-width="120px">
      <el-form-item label="名前">
        <el-input v-model="name"></el-input>
      </el-form-item>
      <el-form-item label="写真">
        <el-input v-model="photo"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  props:['value'],
  computed:{
    name:{
      get(){
        return this.value.name
      },
      set(val){
        this.$emit('input',{ ...this.value, name: val})
      }
    },
    photo:{
      get(){
        return this.value.photo
      },
      set(val){
        this.$emit('input',{ ...this.value, photo: val})
      }
    }
  }
}

</script>

解決策

vueのライフサイクルフックであるbeforeCreateでは算出プロパティを定義することができます。
今回$optionsを使用してカスタムプロパティを定義します。

Post.vue

<template>
  <div class="form">
    <el-form ref="form" label-width="120px">
      <el-form-item label="名前">
        <el-input v-model="name"></el-input>
      </el-form-item>
      <el-form-item label="写真">
        <el-input v-model="photo"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>

export default {
  props:['value'],
  methods: {
    emitData(val) {
      this.$emit('input',{...this.value, ...val});
    },
  }, 
  beforeCreate() {
    [
      'name',
      'photo'
    ].forEach((key) => {
      this.$options.computed = 
        {...this.$options.computed,
          [key] : {
            get() {return this.value[key];},
            set(val) {this.emitData({ [key]: val });},
          }
        }
    });
  },
}
</style>

これで項目数が増えても、キーを足していくだけで追加することができます！。
本当はObject.keysでforEachしたかったですが、beforeCreateの段階ではthis.valueがundefinedとなりました。
これは改善したいので、方法があれば教えて頂きたいです。