HarmonyOS Observe的变量更新了，但是不会触发UI更新

@Entry 
@Component 
struct StatusPage { 
  @State config: TestConfig = new TestConfig() 
  build() { 
    Column({ space: 10 }) { 
      Text(this.config.sub.status) 
        .width('100%').backgroundColor(Color.Red) 
        .textAlign(TextAlign.Center) 
      Text(this.config.status) 
        .width('100%').backgroundColor(Color.Green) 
        .textAlign(TextAlign.Center) 
      List({ space: 5 }) { 
        ForEach(this.config.subList, (sub: SubConfig, index: number) => { 
          ListItem() { 
            Text(sub.status + ' 可点击删除') 
              .width('100%').height(50).backgroundColor(Color.Blue) 
              .textAlign(TextAlign.Center) 
              .onClick(() => { 
                this.config.removeIndex(index) 
              }) 
          } 
        }) 
      } 
      Button('add') 
        .onClick(() => { 
          this.config.add() 
        }) 
      Button('remove') 
        .onClick(() => { 
          this.config.remove() 
        }) 
    } 
    .width('100%').height('100%') 
    .justifyContent(FlexAlign.Center) 
  } 
} 
@Observed 
class TestConfig { 
  sub: SubConfig = new SubConfig('0') 
  status: string = '0' 
  subList: SubConfig[] = [] 
  add() { 
    this.status = (Number(this.status) + 1).toString() 
    this.sub.add() 
    this.subList.push(new SubConfig(this.status)) 
  } 
  remove() { 
    this.status = (Number(this.status) - 1).toString() 
    this.sub.remove() 
    this.subList.splice(0, 1) 
  } 
  removeIndex(index: number) { 
    this.subList.splice(index, 1) 
  } 
} 
@Observed 
class SubConfig { 
  status: string = '0' 
  constructor(status: string) { 
    this.status = status 
  } 
  add() { 
    this.status = (Number(this.status) + 1).toString() 
  } 
  remove() { 
    this.status = (Number(this.status) - 1).toString() 
  } 
}