Vue parent and child components pass an array, neither computed nor watch can trigger

problem description

classify tree tables and load data asynchronously; if the child component sends events to the parent component, and the parent component requests the data and pushes it into the corresponding array object, the calculation property of the child component cannot be triggered

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

when creating a level 3 classification, computed, watch cannot trigger and cannot listen. Try using JSON.parase (JSON.stringify ()) deep copy, create a level 3 classification, computed can trigger, level 4 classification can be created, switch to open other level 1 classification, level 2 and level 3 can be expanded normally, level 4 classification can be loaded, but cannot trigger Computed;watch and cannot listen

)

related codes

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

computed: {
    // 
    formatData: function () {
      let tmp
      if (!Array.isArray(this.data)) {
        tmp = [this.data]
      } else {
        tmp = this.data
      }
      const func = this.evalFunc || treeToArray
      const args = this.evalArgs ? Array.concat([tmp, this.expandAll], this.evalArgs) : [tmp, this.expandAll]
      return func.apply(null, args)
    }
  },
watch: {
    "data": {
      handler: function (newValue, oldValue) {
        console.log(newValue)
      },
      deep: true
    }
  },
methods: {
    // 
    toggleExpanded: function (trIndex, row) {
      if (row.children === undefined || row.children.length === 0) { // 
        this.$emit("tree-load", row)
        this.timer = setInterval(() => {
          if (this.isLoading) {
            const record = this.formatData[trIndex]
            record._expanded = !record._expanded
            clearInterval(this.timer)
          }
        }, 100)
      } else {
        const record = this.formatData[trIndex]
        record._expanded = !record._expanded
      }
      // this.selectedId = trIndex
    },
}

parent component:

methods: {
    onTreeLoad (row) {
      this.isLoading = false
      this.getSubClassifyList(row)
    },
    getSubClassifyList (params) {
      this.httpGet(apiUrl.category + params.code).then(res => {
        if (res.code === 0) {
          if (res.data) {
            // console.log(this.classifyList)
            this.insertArray(this.classifyList, res.data, params.code)
            // console.log(this.classifyList)
            this.classifyList = JSON.parse(JSON.stringify(this.classifyList))
          }
        }
        this.errorMessage(res)
      }).catch((err) => {
        this.errorCode(err)
      })
    },
    insertArray (Array, data, code) {
      let arr = Array
      for (let i = 0; i < arr.length; iPP) {
        if (arr[i].children && arr[i].children.length > 0) {
          this.insertArray(arr[i].children, data, code)
        } else {
          if (arr[i].code === code) {
            arr[i]["children"] = JSON.parse(JSON.stringify(data))
            this.$set(arr, i, arr[i])
            this.isLoading = true
          }
        }
      }
    }
}

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

1. ,