vue中子组件如何间接修改父组件传递过来的值问题

<GoodsBasic :renderObj='renderBasic' :count='count'></GoodsBasic>

<template>
 <div class='goodsBasic'>
   <div>{{ incrementCount}}</div>
   <button @click='changeCount'>增加次数</button>
 </div>
</template>
<script>
export default {
  props: {
    renderObj: {
      type: Object,
      default () {
        return {}
      }
    },
    count:{
      type: Number,
      default:0
    }
  },
  data () {
    return {
      increment: this.count //新定义一个变量，并把prop传进来的值作为初始值
    }
  },
  computed:{
    incrementCount(){ //当新定义的变量变更时，计算属性也会自动更新
      return this.increment
    }
  },
  methods: {
    changeCount(){
      this.increment++
    }
  }
}
</script>

<GoodsBasic :renderObj='renderBasic' :count='count'></GoodsBasic>

<template>
 <div class='goodsBasic'>
   <div>{{ increment }}</div>
   <button @click='changeCount'>增加次数</button>
 </div>
</template>
export default {
  props: {
    renderObj: {
      type: Object,
      default () {
        return {}
      }
    },
    count:{
      type: Number,
      default:0
    }
  },
  data () {
    return {
      increment: this.count  //作为初始值使用，这样做就使prop和后续更新无关了
    }
  },
  methods: {
    changeCount(){
      this.increment++
    }
  }
}
</script>