🐛 [BUG]: Node added in `onMounted()` is not rendered about vue-flow

[bcakmakoglu]

Thanks for the report.
Alas, because of the way the v-models (elements, nodes and edges) are setup at the moment I expect that this issue will persist for the remainder of VueFlow 1.

I will address this problem with the next major update - for now you can use onPaneReady if you need to add some nodes after the initial ones, though be aware that fit-view-on-init will not play nicely with this and won't consider nodes that have been added after that. You can always call fitView yourself though, so that's not a big problem :)

A little bit of background on why this happens:
Currently when elements are passed to VueFlow they are "transformed" from Node -> GraphNode / Edge -> GraphEdge, adding some additional pieces of info to these elements that are necessary for VueFlow to work correctly.

To allow for direct mutation of these objects like node.position.x = 100 without having to pass a new array of elements, the transformed elements are pushed into your model ref.
So basically what happens is this

1. You pass VueFlow your elements ref
2. The elements get transformed
3. Transformed elements overwrite your elements ref value
   To avoid having infinite loops happening while this is done, a pausable watcher is used that waits until your elements ref is overwritten to continue watching for changes.
   When you do elements.value.push(...) during onMounted it ends up happening during the pause of this watcher so the new element is never noticed and consumed by VueFlow :/

What does work is onMounted(() => setTimeout(() => {}, 0)) but obviously this isn't a great pattern to use.

In the next major version I'll see that this binding is solved differently since the current implementation has been giving me headaches for too long but re-doing it would be a breaking change since the whole "transformation" needs to stop and be replaced with an internal map that contains these additional pieces of information that VueFlow needs.

Anyway - sorry that I can't give you a better solution at this point in time.
I'll keep this issue open though.

[DavidPfl]

@bcakmakoglu Thanks a lot for the detailed explanation and the workarounds.