diff --git a/src/components/cylc/Tree.vue b/src/components/cylc/Tree.vue
index 93ccb9358..13ed9bf93 100644
--- a/src/components/cylc/Tree.vue
+++ b/src/components/cylc/Tree.vue
@@ -7,7 +7,7 @@
         :node="workflow"
         :hoverable="hoverable"
         :min-depth="minDepth"
-        :expanded="expanded"
+        :initialExpanded="expanded"
         v-on:tree-item-created="onTreeItemCreated"
         v-on:tree-item-expanded="onTreeItemExpanded"
         v-on:tree-item-collapsed="onTreeItemCollapsed"
diff --git a/src/components/cylc/TreeItem.vue b/src/components/cylc/TreeItem.vue
index a724b2b3b..2ad7d1562 100644
--- a/src/components/cylc/TreeItem.vue
+++ b/src/components/cylc/TreeItem.vue
@@ -79,7 +79,7 @@
           :depth="depth + 1"
           :hoverable="hoverable"
           :min-depth="minDepth"
-          :expanded="expanded"
+          :initialExpanded="initialExpanded"
           v-on:tree-item-created="$emit('tree-item-created', $event)"
           v-on:tree-item-expanded="$emit('tree-item-expanded', $event)"
           v-on:tree-item-collapsed="$emit('tree-item-collapsed', $event)"
@@ -119,7 +119,7 @@ export default {
       default: 0
     },
     hoverable: Boolean,
-    expanded: {
+    initialExpanded: {
       type: Boolean,
       default: true
     }
@@ -128,7 +128,7 @@ export default {
     return {
       active: false,
       selected: false,
-      isExpanded: this.expanded,
+      isExpanded: this.initialExpanded,
       leafProperties: [
         {
           title: 'host id',
@@ -177,6 +177,12 @@ export default {
       })
     }
   },
+  beforeMount () {
+    if (Object.prototype.hasOwnProperty.call(this.node, 'expanded')) {
+      this.isExpanded = this.node.expand
+      this.emitExpandCollapseEvent(this.isExpanded)
+    }
+  },
   methods: {
     destroy () {
       // $destroy will trigger beforeDestroy and destroyed
@@ -184,7 +190,15 @@ export default {
     },
     typeClicked () {
       this.isExpanded = !this.isExpanded
-      if (this.isExpanded) {
+      this.emitExpandCollapseEvent(this.isExpanded)
+    },
+    /**
+     * Emits an event `tree-item-expanded` if `expanded` is true, or emits
+     * `tree-item-collapsed` if `expanded` is false.
+     * @param {boolean} expanded whether the node is expanded or not
+     */
+    emitExpandCollapseEvent (expanded) {
+      if (expanded) {
         this.$emit('tree-item-expanded', this)
       } else {
         this.$emit('tree-item-collapsed', this)
diff --git a/src/store/workflows.module.js b/src/store/workflows.module.js
index 83b2b1183..3f477f47c 100644
--- a/src/store/workflows.module.js
+++ b/src/store/workflows.module.js
@@ -98,6 +98,7 @@ function _getWorkflowTree (workflows) {
             taskProxy.name = taskProxy.task.name
             taskProxy.children = []
             taskProxy.__type = 'task'
+            taskProxy.expanded = false
             let startedTime = 0
             // the GraphQL query is expected to have `jobs(sort: { keys: ["submit_num"], reverse:true }) {`
             for (const job of taskProxy.jobs) {
diff --git a/tests/unit/components/cylc/tree.data.js b/tests/unit/components/cylc/tree.data.js
index fa73f7f89..4e7a50dad 100644
--- a/tests/unit/components/cylc/tree.data.js
+++ b/tests/unit/components/cylc/tree.data.js
@@ -20,6 +20,7 @@ const simpleWorkflowTree4Nodes = [
             id: 'user/workflow1/20100101T0000Z/foo',
             name: 'foo',
             state: 'failed',
+            expanded: false,
             children: [
               {
                 __type: 'job',
diff --git a/tests/unit/components/cylc/treeitem.vue.spec.js b/tests/unit/components/cylc/treeitem.vue.spec.js
index fe48e700b..be1af8c4b 100644
--- a/tests/unit/components/cylc/treeitem.vue.spec.js
+++ b/tests/unit/components/cylc/treeitem.vue.spec.js
@@ -23,26 +23,38 @@ describe('TreeItem component', () => {
   })
   describe('expanded', () => {
     // using simpleJobNode as it has only one child so it is easier/quicker to test
-    it('should display the TreeItem expanded by default', () => {
+    it('should display the cycle point expanded by default', () => {
       const wrapper = mount(TreeItem, {
         propsData: {
-          node: simpleTaskNode,
+          node: simpleCyclepointNode,
           minDepth: 0,
           depth: 0
         }
       })
-      expect(wrapper.props().expanded).to.equal(true)
+      expect(wrapper.props().initialExpanded).to.equal(true)
       const expandControlElement = wrapper.find('.node-expand-collapse-button')
       expect(expandControlElement.text()).to.equal('▽')
     })
-    it('should not display the TreeItem expanded when set expanded=true', () => {
+    it('should not display the cycle point expanded when set expanded=true', () => {
       const wrapper = mount(TreeItem, {
         propsData: {
           node: simpleTaskNode,
-          expanded: false
+          initialExpanded: false
+        }
+      })
+      expect(wrapper.props().initialExpanded).to.equal(false)
+      const expandControlElement = wrapper.find('.node-expand-collapse-button')
+      expect(expandControlElement.text()).to.equal('▷')
+    })
+    it('should not display the task expanded by default', () => {
+      const wrapper = mount(TreeItem, {
+        propsData: {
+          node: simpleTaskNode,
+          minDepth: 0,
+          depth: 0
         }
       })
-      expect(wrapper.props().expanded).to.equal(false)
+      expect(wrapper.props().initialExpanded).to.equal(true)
       const expandControlElement = wrapper.find('.node-expand-collapse-button')
       expect(expandControlElement.text()).to.equal('▷')
     })