Indices are incorrectly calculated when using v-ifs inside a template

[thomasdeanwhite]

Jsfiddle link

https://codesandbox.io/s/draggable-user-cards-with-vue-js-and-tailwind-forked-0bhbkq?file=/src/App.vue

Step by step scenario

When using draggable, there is a strange interaction if using with elements containing v-ifs. In the example above, there can only ever be one element on the screen at the highest level of the draggable, because both other elements are set to v-if="false". However, dragging the top element to past the first three insides will return a futureIndex value of 0, and dragging one of the bottom two elements will return a high index (e.g., 8 when only 5 elements exist) and no element in the :move event.

Actual Behaviour

The hidden v-if elements are being taken into consideration when dragging elements. These appear in the DOM as <!---->

Expected Behaviour

The hidden v-if elements are ignored when dragging elements

[GoldraK]

I have the same problem.

Some idea?

[emersonthis]

Same problem. My quick workaround was to wrap the template in a div.