diff --git a/frappe/public/js/workflow_builder/WorkflowBuilder.vue b/frappe/public/js/workflow_builder/WorkflowBuilder.vue
index a38864c28e..86b0f59b6b 100644
--- a/frappe/public/js/workflow_builder/WorkflowBuilder.vue
+++ b/frappe/public/js/workflow_builder/WorkflowBuilder.vue
@@ -168,7 +168,7 @@ function onDrop(event) {
 						y: node.position.y - node.dimensions.height / 2
 					};
 					stop();
-					store.selected = node;
+					store.workflow.selected = node;
 					store.ref_history.commit();
 				}
 			},
@@ -193,11 +193,19 @@ onMounted(() => store.fetch());
 			<Sidebar />
 		</div>
 		<div class="workflow-container" @drop="onDrop">
-			<VueFlow v-model="store.workflow.elements" connection-mode="loose" @dragover="onDragOver">
+			<VueFlow
+				v-model="store.workflow.elements"
+				connection-mode="loose"
+				@dragover="onDragOver"
+			>
 				<Background pattern-color="#aaa" gap="10" />
 				<Panel :position="PanelPosition.TopRight">
 					<div class="empty-state">
-						<div class="btn btn-md drag-handle" :draggable="true" @dragstart="onDragStart">
+						<div
+							class="btn btn-md drag-handle"
+							:draggable="true"
+							@dragstart="onDragStart"
+						>
 							Drag to add state
 						</div>
 					</div>
diff --git a/frappe/public/js/workflow_builder/components/ActionNode.vue b/frappe/public/js/workflow_builder/components/ActionNode.vue
index b2abd34bf6..d8514c7565 100644
--- a/frappe/public/js/workflow_builder/components/ActionNode.vue
+++ b/frappe/public/js/workflow_builder/components/ActionNode.vue
@@ -27,13 +27,13 @@ const { findNode } = useVueFlow();
 watch(
 	() => findNode(props.node.id)?.selected,
 	val => {
-		store.selected = val ? props.node : "";
+		store.workflow.selected = val ? props.node : "";
 	}
 );
 </script>
 
 <template>
-	<div class="node" tabindex="0" @click.stop="store.selected = node">
+	<div class="node" tabindex="0" @click.stop="store.workflow.selected = node">
 		<div v-if="node.data.action" class="node-label">{{ node.data.action }}</div>
 		<div v-else class="node-placeholder text-muted">{{ __("No Label") }}</div>
 		<Handle
diff --git a/frappe/public/js/workflow_builder/components/Properties.vue b/frappe/public/js/workflow_builder/components/Properties.vue
index 46bdb72224..9e042ababb 100644
--- a/frappe/public/js/workflow_builder/components/Properties.vue
+++ b/frappe/public/js/workflow_builder/components/Properties.vue
@@ -1,16 +1,13 @@
 <script setup>
 import { ref, computed, nextTick } from "vue";
 import { useStore } from "../store";
-import { useVueFlow } from "@vue-flow/core";
 
 let store = useStore();
 
-let { nodes } = useVueFlow();
-
 let title = ref("Workflow Details");
 
 let doc = computed(() => {
-	return store.selected ? store.selected.data : store.workflow_doc;
+	return store.workflow.selected ? store.workflow.selected.data : store.workflow_doc;
 });
 
 let properties = computed(() => {
@@ -18,7 +15,7 @@ let properties = computed(() => {
 		let field = $(".field input[data-fieldname!='document_type']").first();
 		if (field.val() === "") field.focus();
 	});
-	if (store.selected && "action" in store.selected.data) {
+	if (store.workflow.selected && "action" in store.workflow.selected.data) {
 		title.value = "Transition Properties";
 		return store.transitionfields.filter(df => {
 			if (in_list(["action", "allowed", "allow_self_approval", "condition"], df.fieldname)) {
@@ -26,7 +23,7 @@ let properties = computed(() => {
 			}
 			return false;
 		});
-	} else if (store.selected && "state" in store.selected.data) {
+	} else if (store.workflow.selected && "state" in store.workflow.selected.data) {
 		title.value = "State Properties";
 		return store.statefields;
 	}
diff --git a/frappe/public/js/workflow_builder/components/StateNode.vue b/frappe/public/js/workflow_builder/components/StateNode.vue
index fbacf5fc16..e5a673175f 100644
--- a/frappe/public/js/workflow_builder/components/StateNode.vue
+++ b/frappe/public/js/workflow_builder/components/StateNode.vue
@@ -26,13 +26,13 @@ const { findNode } = useVueFlow();
 watch(
 	() => findNode(props.node.id)?.selected,
 	val => {
-		store.selected = val ? props.node : "";
+		store.workflow.selected = val ? props.node : "";
 	}
 );
 </script>
 
 <template>
-	<div class="node" tabindex="0" @click.stop="store.selected = node">
+	<div class="node" tabindex="0" @click.stop="store.workflow.selected = node">
 		<div v-if="node.data.state" class="node-label">{{ node.data.state }}</div>
 		<div v-else class="node-placeholder text-muted">{{ __("No Label") }}</div>
 		<Handle
diff --git a/frappe/public/js/workflow_builder/store.js b/frappe/public/js/workflow_builder/store.js
index b9328f5f2c..0c98b74cbd 100644
--- a/frappe/public/js/workflow_builder/store.js
+++ b/frappe/public/js/workflow_builder/store.js
@@ -6,8 +6,7 @@ import { useManualRefHistory, onKeyDown } from "@vueuse/core";
 export const useStore = defineStore("workflow-builder-store", () => {
 	let workflow_name = ref(null);
 	let workflow_doc = ref(null);
-	let workflow = ref({ elements: [] });
-	let selected = ref(null);
+	let workflow = ref({ elements: [], selected: null });
 	let workflowfields = ref([]);
 	let statefields = ref([]);
 	let transitionfields = ref([]);
@@ -94,7 +93,6 @@ export const useStore = defineStore("workflow-builder-store", () => {
 		workflow_name,
 		workflow_doc,
 		workflow,
-		selected,
 		workflowfields,
 		statefields,
 		transitionfields,