Dnd stops working when it has 2 or more instances

[DiegoSouzaDev]

My application has a component that uses vue-smooth-dnd to manage the order of columns in a table, and it works nicely when I have one instance of the component, but if I have two instances of that component, it stops working and print the following error in the console:

index.js?c878:1 Uncaught TypeError: Cannot read property 'bottom' of undefined
    at H (index.js?c878:1)
    at eval (index.js?c878:1)
    at HTMLDocument.Ue (index.js?c878:1)
H @ index.js?c878:1

Even if I put a v-if on my component, the error continues to happen.

example:

simple page:

• will render one or more table field components.

table field component:

• will render a row where can be added columns, and a button to open a configuration component.

configuration component:

• make it possible for the user to reorder the columns of the parent table field.

So, if I have only one table field component it works. If I have more than one, even if only one configuration component is rendered, the error occurs

[davestewart]

Can you post a reproduction on Code Sandbox?

[WashingtonAviz]

I have the same error can anyone help me? @DiegoSouzaDev how did you solve it?

[WebRookie]

@DiegoSouzaDev how did you solve it? i get the same error