Those things about vue modal

In the past few days, I have encountered such a thing with Vue development. The requirement is to make a pop-up window layer for selecting users. This window will be called by multiple places, but the returned value needs to be stuffed into different places.
   Common practice: Encapsulate a common layer component. Since the outer layer of the component and the inside of the component need to be able to control the display and hiding of the component, it is necessary to realize the communication between the components. To realize this function, the first reaction is:

The first solution:
Introduce the component into the component that calls the pop-up layer to communicate between parent and child components by using
attributes and events, but the consequence of this is that multiple pop-up layer fragments will be generated in html , and the generated code is inserted deep, which will cause the mask layer to not cover all of it. (More depressed) So I thought of the

second solution:
put this component in the outermost layer (below the body element) and use the store in vuex to create a variable in the state to achieve communication between multiple components. This solves the above problems very well, but this leads to the communication between the component and the store, which directly leads to a higher degree of coupling of components at this layer, which is inconvenient to transplant and cannot be encapsulated into business components. . So I came up with the

third solution:
return to the original, use the ref attribute and encapsulate the display and hide methods inside the component, and pass in the callback function when calling, and use the selected record as the return when submitting the selected record. The parameters of the hanging function are passed out. All of a sudden everything goes well, which not only facilitates the transplantation but also reduces the coupling. But I don't feel any sense of accomplishment, because this method is common in the architecture of mvc. If it is used in vue, it is simply a retrogression of history. But there is no way to prove that this method can best meet my requirements.
Summary: This is also the so-called there is no best, only the most suitable!