Drag and Drop works visually in Cypress Test Runner, but it's not actually having an effect

I'm using the 4tw/cypress-drag-drop plugin to move a draggable element into a div. When the element is properly dragged and dropped, it should trigger some other elements to appear (such as an X on the draggable element to remove it). This is in Vue.js using VueDraggable.

In Cypress, my test case includes:

cy.get([draggable element]).drag([div area])

In the Test Runner, I can SEE the element being moved, but when it's "dropped" there's no effect.
I've tried adding {force:true} but that has no effect.

I have also tried using various iterations of the below, but in this case, the Test Runner never even grabs the element to drag it:

<!-- language: js -->

const dataTransfer = new DataTransfer
cy.get(source)
   .trigger('dragstart', { dataTransfer })
cy.get(target)
  .trigger('drop', { dataTransfer, force: true })

Cypress version: v10.7
4tw/cypress-drag-drop: v2.2.1 (I've tried with various versions)

Any help or suggestions are appreciated!

Here's a working example using VueDraggable demo page.

The draggable elements seem to all have data-draggable="true" attribute, so I use that as selector + text content (name on the card).

It may be that all you need to do is provide an assertion after the drag (to confirm the effect). Otherwise, the test ends too soon and the test runner never updates to the final page state.

cy.viewport(1200,1200)
cy.visit('https://sortablejs.github.io/vue.draggable.next/#/simple');

// Check order before the drag
const listBeforeDrag = [
  { "name": "John", "id": 0 },
  { "name": "Joao", "id": 1 },
  { "name": "Jean", "id": 2 }
] 
cy.contains('h3', 'List')
  .next('pre')
  .then($el => JSON.parse($el.text()))
  .should('deep.eq', listBeforeDrag)

// perform drag
cy.get('[data-draggable]:contains(John)')
  .drag('[data-draggable]:contains(Jean)')

// Check order after the drag
const listAfterDrag = [
  { "name": "Joao", "id": 1 },
  { "name": "Jean", "id": 2 },
  { "name": "John", "id": 0 }
] 
cy.contains('h3', 'List')
  .next('pre')
  .then($el => JSON.parse($el.text()))
  .should('deep.eq', listAfterDrag)