Vue slot is not working in rare and unpredictable cases (potential vue bug?)

Question

I have this weird bug with a slot that is unreliable in certain unknown cases.

Components

There are 3 hierarchical components.

• The grandchild (headlessTable), which offers a slot named arrayValue.
• The child (collapsableCard), which passes the slot between grandchild and parent.
• The parent (orderDataCard), who decides to render a link for that slot.

Problem: Instead of rendering the link of the parent, the default slot html of the child is being rendered when new data is loaded.

Datastructure (orderDetails)

• process (obj)
  • mark (string)
  • common (obj)
    • additionalArguments (array)
      • category (string)
      • type (string)
      • name (string)
      • value (string)
  • salesOrganisation (obj)
  • invoices (array)
    • invoiceAgreementId (string)
    • paymentType (string)

Reproduction

Stackblitz or Codesandbox

Please look at the field additionalArguments, it contains a link. Press ALT+M to simulate fetching new data. Now, instead of rendering a link, the default slot html for that named slot is rendered instead. You can press ALT+J to load the original data, but this time there's no link.

Initial data (ALT+J)	Loaded data (ALT+M)	Type	Equal value
	mark	str	false
common	common	obj	true
salesOrganisation	salesOrganisation	obj	true
invoices (empty)	invoices	arr	false

How 2 resolve

• if you uncomment line 68 in app.js (or line 73 in App.vue if you're on codesandbox), which is the field called mark
• if invoices is not initially empty in app.js
• if mark is removed from html in orderDataCard
• if salesOrganisation is removed from html in orderDataCard
• if the html in the v-for template section for invoiceItems is empty in orderDataCard

Obviously, these are not solutions.

Notes

In any case, there is no dependence or anything between any of the fields, so it's hard for me to understand why this happens and I suspect this to be a bug with vue. I already created an issue for this. However, devs won't look at the reproduction, because they think it's not minimal as #lines > 100. As soon as I delete any more meaningful lines, the bug is resolved and the removed code is not faulty, so it's very frustrating to work on this. I could still remove lines that are not meaningful, but that would make it more difficult for everyone involved to understand what data is being rendered.

Is anyone able to acknowledge the fact that this is a problem with vue and that the code is not reducible OR (I would prefer this) is anyone able to fix this?

Answer 1

The problem is linked to Vue handling of multiple instances of the same component. In OrderDataCard.vue you have two instances of Collapsable-Card without unique keys. In this case:

Vue uses an algorithm that minimizes element movement and tries to patch/reuse elements of the same type in-place as much as possible.

I don't quite know how these algorithms work, and why, apparently, it reused the second instance (without a defined slot content), but, setting a unique key for these components solved the issue.

See the working code sandbox: https://codesandbox.io/s/admiring-hamilton-5ytpp?file=/src/components/OrderDataCard.vue:133-149.

Note: I couldn't trigger keyboard events in my browser, so I triggered them on button click.