Is it possible to prevent re-mounting not updated nodes?

[jozsefklemasz]

Hi,
I've a problem with unnecessary re-mounting of components.

I've provided my edges and nodes as two separate array, both of these arrays are a computed property.
My main issue is that when anything causes the node list to be re-computed, all of my nodes(even the untouched ones) are unmounted and then re-mounted.

My setup is a bit complicated, so when the user drags one of the nodes, i'm saving the new node position on my backend as part of an existing item. After this item was updated on the backend, my local in-store representation of this item will be updated based on what the backend responds with, this causes my nodes to be re-computed, and even though only one of the node objects position has changed, all of the nodes are unmounted and re-mounted.

I've tried to add a :key prop to my custom node component to prevent this behaviour, but it has no effect:

<template #node-note="prop">
    <note-node
	    :_id="prop.id"
	    :key="prop.id"
	    v-bind="prop.data"
	    @delete="deleteNote(prop.id)"
	    @update="updateNote(prop.id, $event)"
    />
</template>

Is it an intended behaviour to re-mount all of the nodes when something changes in the nodes array, or does anyone know how to prevent this?

[bcakmakoglu]

You'll have to provide a proper reproduction demonstrating that nodes are actually unmounted and remounted.
Aside from that, don't use a :key on the slot. The slot doesn't render a list, it is used as a template to mount your node, thus it already gets a key from vue flow and you adding another one could very well be causing your issue to begin with.

[jozsefklemasz]

Thank you for your reply. I've tried to recreate the issue in a codesandbox but i wasn't be able to. After many hours of investigation i've found out the root of our issue.
We are using quasar in our project, and the vue-flow component in question was wrapped into a and within it into a and components.
These are supposed to be simple container components, they've got nothing to do with rerendering stuff, however when I replaced these 3 components to a simple div, all of the re-mounting issues went away.

I'm not really sure why were these container components actually causing the node components to re-mount(I've checked and the vue-flow component itself wasn't re-mounted, neither any other component that were beside it in the q-page component).

[bcakmakoglu]

Mh... if you can give me a reproduction for this issue I might be able to help investigate :)