diff --git a/packages/plugin-outline-pane/src/controllers/tree-node.ts b/packages/plugin-outline-pane/src/controllers/tree-node.ts
index 2a6bc0aca..af82904ee 100644
--- a/packages/plugin-outline-pane/src/controllers/tree-node.ts
+++ b/packages/plugin-outline-pane/src/controllers/tree-node.ts
@@ -35,6 +35,8 @@ enum EVENT_NAMES {
   titleLabelChanged = 'titleLabelChanged',
 
   expandableChanged = 'expandableChanged',
+
+  conditionChanged = 'conditionChanged',
 }
 
 export default class TreeNode {
@@ -152,6 +154,10 @@ export default class TreeNode {
     return this.node.slots.map((node) => this.tree.getTreeNode(node));
   }
 
+  get condition(): boolean {
+    return this.node.hasCondition() && !this.node.conditionGroup;
+  }
+
   get children(): TreeNode[] | null {
     return this.node.children?.map((node) => this.tree.getTreeNode(node)) || null;
   }
@@ -203,6 +209,15 @@ export default class TreeNode {
       this.event.off(EVENT_NAMES.titleLabelChanged, fn);
     };
   }
+
+  onConditionChanged(fn: (treeNode: TreeNode) => void): IPublicTypeDisposable {
+    this.event.on(EVENT_NAMES.conditionChanged, fn);
+
+    return () => {
+      this.event.off(EVENT_NAMES.conditionChanged, fn);
+    };
+  }
+
   onExpandableChanged(fn: (expandable: boolean) => void): IPublicTypeDisposable {
     this.event.on(EVENT_NAMES.expandableChanged, fn);
     return () => {
@@ -221,6 +236,10 @@ export default class TreeNode {
     this.event.emit(EVENT_NAMES.titleLabelChanged, this.title);
   }
 
+  notifyConditionChanged(): void {
+    this.event.emit(EVENT_NAMES.conditionChanged, this.condition);
+  }
+
   setHidden(flag: boolean) {
     if (this.node.conditionGroup) {
       return;
diff --git a/packages/plugin-outline-pane/src/controllers/tree.ts b/packages/plugin-outline-pane/src/controllers/tree.ts
index 94cab7879..7b9ad0593 100644
--- a/packages/plugin-outline-pane/src/controllers/tree.ts
+++ b/packages/plugin-outline-pane/src/controllers/tree.ts
@@ -35,6 +35,9 @@ export class Tree {
       if (key === '___title___') {
         const treeNode = this.getTreeNodeById(node.id);
         treeNode?.notifyTitleLabelChanged();
+      } else if (key === '___condition___') {
+        const treeNode = this.getTreeNodeById(node.id);
+        treeNode?.notifyConditionChanged();
       }
     });
   }
diff --git a/packages/plugin-outline-pane/src/views/tree-title.tsx b/packages/plugin-outline-pane/src/views/tree-title.tsx
index 96a3dfa7b..923213238 100644
--- a/packages/plugin-outline-pane/src/views/tree-title.tsx
+++ b/packages/plugin-outline-pane/src/views/tree-title.tsx
@@ -27,6 +27,7 @@ export default class TreeTitle extends PureComponent<{
   state: {
     editing: boolean;
     title: string;
+    condition?: boolean;
   } = {
     editing: false,
     title: '',
@@ -80,12 +81,18 @@ export default class TreeTitle extends PureComponent<{
     this.setState({
       editing: false,
       title: treeNode.titleLabel,
+      condition: treeNode.condition,
     });
     treeNode.onTitleLabelChanged(() => {
       this.setState({
         title: treeNode.titleLabel,
       });
     });
+    treeNode.onConditionChanged(() => {
+      this.setState({
+        condition: treeNode.condition,
+      });
+    });
   }
 
   render() {
@@ -188,7 +195,7 @@ export default class TreeTitle extends PureComponent<{
                   <Tip>{intlNode('Loop')}</Tip>
                 </a>
               )}
-              {node.hasCondition() && !node.conditionGroup && (
+              {this.state.condition && (
                 <a className="tree-node-tag cond">
                   {/* todo: click todo something */}
                   <IconCond />