Abstracted Dialog doesn't show different content in slots

[kespaldon]

Hi! Awesome framework btw 🔥

So, I'm using nuxt-headlessui and I have abstracted the Dialog code (including the transition components) into Modal.vue.

I've setup two slots, one default and one for footer.

Now I have two <Modal /> components in my header (for profile and authentication) and another in my gallery (for showing details).

header dialog

<Modal key="header" :trigger="modal" @on-close="modal = false">
  hiaaaaasdfasdf
  <template #footer>footer!</template>
</Modal>

gallery dialog

<Modal key="poster" :trigger="modal" @on-close="modal = false">
  poster! {{ selectedPoster }}
  <template #footer> footer for poster modal</template>
</Modal>

The problem now is that when I click any of the triggers to show my dialog, it only shows the latter (gallery) content!

I don't know what I'm doing wrong here... I've tried adding keys to differentiate the usages but no dice.

SOS. Thanks!

---

Edit: Thinking of a fix, I created two abstracted modals that would serve these two use cases. Weirdly enough it's still showing the same content. Sometimes the first, sometimes the second

---

Edit 2: I've pasted the Modal.vue code in directly into my header and it's still the same scenario! What's going ooooonnnn

[RobinMalfait]

Hey, thank you for your question! 🙏

Can you attach a minimal reproduction repo that shows this issue, that will be easier to see what's going on exactly.

[kespaldon]

Hi! Sorry for the late response, there was a 1-week holiday.

here you go.

https://github.com/kespaldon/headless-dialog-repro

Hope you can help me on this! 🙏🏼

---

here's a codesandbox for convenience

https://codesandbox.io/p/github/kespaldon/headless-dialog-repro/master?workspaceId=320684d1-a8a0-4b24-a1f5-51cb918d39f8