VueFlow – Edges don’t persist after enabling connectable on “Math Operation” example clone

[calebeaires]

Hello VueFlow team,

I cloned the “Math Operation” example and changed all node/handle properties from :connectable="false" to :connectable="true" to allow creating connections by dragging edges. However, the connector does not persist the edge after I drop it—no edge is created or saved.

Details:

• Example: “Math Operation” (cloned locally)
• Change made: :connectable="true" applied to all relevant nodes/handles
• Expected behavior: Edge should be created and remain after completing the connection
• Actual behavior: The connection attempt completes visually, but the edge is not persisted

Could you please advise what I might be missing? For example:

• Do I need to handle onConnect and manually push to edges?
• Are there specific isValidConnection, type, or id requirements for handles in this example?
• Any known limitations or additional props needed (e.g., connectOnClick, elementsSelectable, defaultEdgeOptions)?

If helpful, I can provide a minimal reproducible repo or code snippets (nodes, edges state, and the component where I set :connectable="true").

Thank you!