Vue.js Dynamic Component is no Created but showing in Console

Question

This is my SimpleFlowchart.vue ChildComponent

 <FlowchartDecision v-bind.sync="decision" 
      v-for="(decision, index) in scene.decisions" 
      :key="`decision${index}`"
      :options="nodeOptions">
    </FlowchartDecision>

This is how i am returning it in Props

Props:{
     scene:{
      decisions: [
            {
              id: '',
               x: '',
               y: '',
               type: '',
               label: '',
              }
            ],
       decisions:[],
    }
}

This is my adddecision function method

 adddecision(y,nid,x){
    this.scene.decisions.push({
          id: '',
          x: '',
          y: '',
          type: '',
          label: '',
      })
     console.log(this.scene.decisions);
}

This is my Parent Component

here i am doing this

 <button  @click="adddecision()">+</button>

This is how i am Emitting this in ParentComponent which is FlowchartDecision.vue

   adddecision(){
    this.$emit('adddecision')
  },

I am only Calling this SimpleFlowchart.vue Component in App.vue Here i have passed decisions as a prop in scene

       decisions:[
   {
      id:10,
      x:-1000,
      y:170,
      type:'asad',
      label:'bilal'
   }
 ],

Here is the Output which i am getting in the Console this is the prop that i have passed in app.vue which i am getting in console

This is my Console output which i have passed in app.vue prop Please Click on the following link to open the image

https://gyazo.com/c54b1713bdf32a1aef9d90a994f825c7

Answer 1

Please try using deepCopy to change reference:

adddecision(y,nid,x){
   this.scene.decisions.push({
         id: '',
         x: '',
         y: '',
         type: '',
         label: '',
     })
   this.scene = JSON.parse(JSON.stringify(this.scene))
}

Answer 2

问题是当我绑定它时，我没有将其与流程图决策组件绑定，而我自己将其称为另一个组件，这就是为什么它无法正常工作的原因