diff --git a/client/src/components/Workflow/Published/WorkflowPublished.vue b/client/src/components/Workflow/Published/WorkflowPublished.vue
index 4ec5ed90ea4a..7452a4b62b58 100644
--- a/client/src/components/Workflow/Published/WorkflowPublished.vue
+++ b/client/src/components/Workflow/Published/WorkflowPublished.vue
@@ -46,7 +46,7 @@ const errorMessage = ref("");
 
 const { datatypesMapper } = useDatatypesMapper();
 
-const { stateStore } = provideScopedWorkflowStores(ref(props.id));
+const { stateStore } = provideScopedWorkflowStores(props.id);
 
 stateStore.setScale(0.75);
 
diff --git a/client/src/composables/workflowStores.ts b/client/src/composables/workflowStores.ts
index cf0c3922f589..d98072a4b037 100644
--- a/client/src/composables/workflowStores.ts
+++ b/client/src/composables/workflowStores.ts
@@ -1,4 +1,4 @@
-import { inject, onScopeDispose, provide, type Ref } from "vue";
+import { inject, onScopeDispose, provide, type Ref, ref } from "vue";
 
 import { useConnectionStore } from "@/stores/workflowConnectionStore";
 import { useWorkflowCommentStore } from "@/stores/workflowEditorCommentStore";
@@ -15,7 +15,11 @@ import { useWorkflowStepStore } from "@/stores/workflowStepStore";
  * @param workflowId the workflow to scope to
  * @returns workflow Stores
  */
-export function provideScopedWorkflowStores(workflowId: Ref<string>) {
+export function provideScopedWorkflowStores(workflowId: Ref<string> | string) {
+    if (typeof workflowId === "string") {
+        workflowId = ref(workflowId);
+    }
+
     provide("workflowId", workflowId);
 
     const connectionStore = useConnectionStore(workflowId.value);