Am I abstracting too much?

Apologies for the format of the question, it’s a bit late here and I couldn’t find a way to state my ideas more clearly. Maybe I am just trying too hard and overcomplicating something that is already a simple thing to do.

I just want to know how dumb this is (to discard the idea) or if there are glaring improvements I could make to this implementation.

The setup:

  • FWIW This is Vue3 + TS + Pinia
  • I have a “base” drawer component
  • Ideally I don’t want to reuse it by implementing it over and over (because I have many such drawers (forms) to display) and I need to implement logic to keep track of the state within each drawer implementation.
  • So I wrapped it in yet-another-component which is paired to a [Pinia] store.
    • This component has child components registered and “knows every single one”
    • “Triggering” the drawer is now a matter of calling the method in the store that shows the drawer.
    • Upon updating the store, this component will swap the appropriate child form and execute the “confirm” action declared in the current child component (form) being rendered.

What doesn’t feel right:

  • Using the store for this purpose in the first place.
  • When implementing the children forms, I would need to also hook the different pieces to the store.
  • And most importantly IMO, for maintenance purposes, anyone would need to know how this is done. (Especially worried about the confirmAction which is usually a “save” action)
  • I kind of feel like I am missing something and could use another feature of the framework, but can’t quite pinpoint what it could help me more in this case.