HarmonyOS 多层级的变量改变怎么同步修改到UI中

参考demo：

@Observed
class type extends Array<Person> {

}

@Observed
class Grade{

  chinese : boolean
  math: boolean
  constructor(chinese:boolean,math:boolean) {
    this.chinese = chinese
    this.math = math
  }
}


@Observed
class Person {
  name: string
  age: number
  changed: boolean
  grage:Grade
  constructor(name: string, age: number, changed: boolean,grade:Grade) {
    this.name = name
    this.age = age
    this.changed = changed
    this.grage = grade
  }
}

@Component
struct ItemView1 {
  @ObjectLink person1: type
  build() {
    Column() {
      Text(JSON.stringify(this.person1))
    }
  }
}

@Component
struct ItemView {
  @ObjectLink person: Person
  build() {
    Column(){
      Row() {
        Text(this.person.name).itemText(this.person.changed)
        Blank()
        Text(this.person.age.toString()).itemText(this.person.changed)


      }
      .width('100%')
      .height(50)
      .padding(5)
      .backgroundColor('#F7F8FA')
      .onClick(() => {
        this.person.age++
        this.person.changed = true
        this.person.grage.chinese = !this.person.grage.chinese
        this.person.grage.math = !this.person.grage.math
      })
      Text("chinese:"+this.person.grage.chinese)
      Text("math:"+this.person.grage.math)

    }
  }
}

@Entry
@Component
struct ObjectArrDemo2Page {
  @State per1:Person = new Person('Roes', 12, false,new Grade(true,false));
  @State persons: Person[] = [this.per1]
  private count: number = 0
  build() {
    Column({ space: 10 }) {
      ItemView1({person1:[this.per1]})

      List({ space: 5 }) {
        ForEach(this.persons, (item: Person, index: number) => {
          ListItem() {
            ItemView({ person: item })
          }
        })
      }
    }
    .width('100%')
    .height('100%')
    .padding(5)
  }
}

@Extend(Text)
function itemText(changed: boolean) {
  .fontSize(22)
  .fontColor(changed ? '#21A3A1' : '#000000')
}