How to organize the correct application architecture VUE3 Composition API?

I have a Homepage in which there is a Header component in which there is a button calling a modal window, a modal window is a regular UI element with basic settings, to which I need to pass HTML with, for example, registration, but I don’t quite understand how to do it correctly while storing the state without Vuex. At the moment it looks like this:

controllers
 |--ModalsController.js // here I planned to store the state of the modal window (open/closed/switched)
ui
 |--Heaader.vue //there is a button calling a specific modal window (for example registration) 
 |--ModalBase.vue //basic layout of the modal window

pages
 |--Homepage.vue <Header/>
 login
   |--Login.vue     // Html of the modal SignIn window
   ...

But after reading the documentation several times, I didn’t figure out how to link it all, I’d really appreciate it if someone could tell me. Thank you in advance!