Vue deep-seated object update view does not render problem

has a virtual demo node with the following structure

var obj={
    "tag":"div",
    "id":"111",
    "data":{
        "attrs":{"id":"1111"}
    },"children":[
    "tag":"div",
    "id":"111",
    "data":{
        "attrs":{"id":"1111"}
        },
    "children":[]
    ]
}

I used the render in vue to render this node, and the render,this.list directly used is the obj above

<script>
  export default {
    name: "DomCreate",
    render(createElement){
      return createElement(this.list.tag,{...Object.assign(this.list.data)},this.list.children)
    },
    props:{
      list:Object
    }
  }
</script>

the question now is that I modified obj.children [0] .data.attrs.id = "22222rendering with this.$set. Why not trigger the rendering of render, and it won"t work even if you force it to render. And modify the outer layer of the obj.data.attrs.id can be re-rendered. For advice, thank you

Sep.04,2021

Vue cannot detect the array of the following changes and will not trigger view updates:

1. When you use the index to set an item directly, for example: vm.items [index] = newValue
2. When you modify the length of an array, for example: vm.items.length = newLength

slightly change the code according to your description


obj.children[0].data.attrs.id='22222';


Vue.set(this.obj.children , 0, this.obj.children[0]);
Menu