Setting edges and nodes in VueFlow component definition causes edges to underneath workflow

[alexpeverett]

Similar issue: #1503

The linked issue above is the same issue we are having again now. Recently we noticed a warning regarding the deprecation of options (nodes and edges) for the useVueFlow method. We refactored the code to use an id, and we inject the nodes and edges in the VueFlow component instead. However, the edges now appear to be underneath the workflow and cannot be clicked on.

Before:

After:

Also when applying an id in object format (access state using options API / https://vueflow.dev/guide/vue-flow/state.html#access-state-in-options-api) the warning regarding options persists but the warning doesn't persist when the id is passed as a simple string instead of an object with the string applied to item 'id'.

No warning:

Warning:

[bcakmakoglu]

Set elevate-edges-on-select on VueFlow so that the edges get elevated to the same level as the nodes. Otherwise they are just going to use a z-index that's below nodes by default.

also when applying an id in object format (access state using options API / vueflow.dev/guide/vue-flow/state.html#access-state-in-options-api) the warning regarding options persists but the warning doesn't persist when the id is passed as a simple string instead of an object with the string applied to item 'id'.

That's intentional, stop using an object as an argument for useVueFlow.