дети реагируют, но дети детей не реагируют - vue

Question

Когда у меня есть следующие данные.

private static _docFields: TreeData[] = [
    {
      id: 0,
      id: NodeType.Annotation,
      label: 'Annotations',
      children: [],
    },

и если я выполняю следующие действия, они реагируют.

ApiService.post(
          'documentAnnotation/annotations', { projectId: AppStore.projectId },
        ).then((responseData: KeyValue[]) => {
          // TODO: Can't there be a mapper which can transform the results?
          responseData.forEach((documentAnnotation) => {

            AppStore.docFields.find((x) => x.id === NodeType.Annotation)!.children!.push({
              label: documentAnnotation.value,
              value: documentAnnotation.key,
            });

          });
        });

Но когда у меня есть следующие данные,

private static _docFields: TreeData[] = [
    {
      id: '0.' + NodeType.Annotation,
      label: 'Annotations',
      nodeType: NodeType.Annotation,
      children: [{
        id: '0.' + NodeType.SinglePageAnnotation,
        label: 'Single',
        children: [],
        nodeType: NodeType.SinglePageAnnotation,
      }, {
        id: '0.' + NodeType.MultiPageAnnotation,
        label: 'Multiple',
        children: [],
        nodeType: NodeType.MultiPageAnnotation,
      }],
    },

и я делаю следующее, это не реактивно. что мне нужно сделать?

AppStore.docFields
        .find((x) => x.nodeType === NodeType.Annotation)!.children!
        .find((y) => y.nodeType === NodeType.SinglePageAnnotation)!.children!.push({
                  label: documentAnnotation.value,
                  value: documentAnnotation.key,
                });

Я связал дерево пользовательского интерфейса элемента следующим образом.

<el-tree :data="AppStore.docFields">