The vue child component does not respond to the value of the object property passed by the parent component.

problem description

vue2.0, after the child component receives the value passed by the parent component, it does not update the response to the view

the environmental background of the problems and what methods you have tried

first of all, my child component page is a form page, in which the form elements are rendered according to an array passed by the parent component, so the number is not fixed
I define an object property in the parent component to save the value of each form element
but for example, when I do something on the page, the object in both the parent component and the child component changes, but it does not respond to the view. I turned on watch"s deep listening and used the this.$set method to assign values to the object, but the view did not change

related codes

/ / Please paste the code text below (do not replace the code with pictures)

< H2 > this is the rendering code < / H2 >

<div v-for="form in formList" :key="form.fieldId">
    <div class="handle-input-single border-bottom" v-if="form.type === "1" || form.type === "2"">
      <span class="handle-title">{{form.fieldName}}</span>
      <span class="handle-select"
      @click="PickerHandle(form.fieldCode, form.type, form.column, form.fieldName)"
      v-if="form.readOnly === "0"">{{myFromData[form.fieldCode] !== null ? myFromData[form.fieldCode][0].value : ""}}</span>
      <!-- v-if="form.readOnly === "0"">{{pickerSelect(form.fieldCode)}}</span> -->
      <span class="handle-select readOnly" v-else>{{form.fieldDefault}}</span>
    </div>
</div>

< H2 > this is part of the code in the js of the page < / H2 >

props: {
    formData: Object, // 
    formList: Array, // 
    toggleStep: Boolean
  },
  data () {
    return {
      personView: "",
      myFromData: this.formData // 
    }
  },
  watch: {
    myFromData: {
    // 
      handler (newVal, oldVal) {
        console.log(newVal)
        console.log(oldVal)
      },
      deep: true
    }
  },
  computed: {
    pickerSelect: () => {
      return function (e) {
        if (this.formData[e] !== null) {
          return this.formData[e][0].value
        } else {
          return ""
        }
      }
    }
  },
  methods: {
    PickerHandle (code, type, pickerList, pickerName) { // 
      if (type === "1" || type === "2") {
        this.$singlePicker({
          textTitle: pickerName,
          pickerList: pickerList,
          callback: action => {
            let picker = {}
            picker.data = action
            picker.code = code
            this.$set(this.myFromData, code, action) // 
            this.$emit("pickerHandle", picker) // 
          }
        })
      }
    }
   }

what result do you expect? What is the error message actually seen?

Why don"t you respond to the changes in the data? ask for the answer. Thank you

I solved it just now. Finally, I found that I used the form of fromData.X=XXX when the parent component initially assigned the value of the fromData property, so that vue could not monitor the property change of this object. After changing it to this.$set, after the object property was changed to getter and setter, we can respond normally. Thank you for your help .