Cannot drag an element to the last position in 'Two List' draggable component

[YuruiWang]

I develop a two-list draggable component. If I firstly drag one element called 'A' from list1 to the last position of list2 and drag another element called 'B' from list1 also to the last position of list2 under 'A', 'B' will end up in the second last position incorrectly and 'A' is exchanged to the last position automatedly. However, if I drag 'A' to another position of list2 after the first drag, 'B' works correctly.

Without any other changes, I am sure that 'B' gets the right index of list2. But 'B' still ends up in the wrong position.

Is there anyone who meets a similar bug? Thanks for your help.

<draggable
                class="drag-elements"
                :list="modal.list1" 
                group="dragList">
                <div
                  class="list1"
                  v-for="(leftElement) in modal.list1"
                  :key="leftElement"
                >
                  {{ leftElement }}
                </div>

<draggable 
                class="drag-elements"
                :list="modal.list2" 
                group="dragList">
                <div
                  class="list2"
                  v-for="(rightElement) in modal.list2"
                  :key="rightElement"
                >
                  {{ rightElement }}
                </div>

[iwalucas]

I am having the exact same issue.... still couldn't figure out a solution

[iwalucas]

what I found is that if I load the list2 outside vue, it will behave like that.... now I am trying to fix approach