To print the modal content from the button outside the modal in another component in Vue 3

Question

I have structture as follows

//main component
<button onClick="PrintModal()">Print</button>
<ModalComponent :active = active/>

//modal component
// All the modal headings and body

Now I want to print the modal contents from the button, the active is passed as a prop. And the modal is a form so all the values of the form are also passed as a prop while calling the modal component from the main component.

When I am using the window.print() it is printing the full screen not only the modal contents, but I want to print only the modal contents, I am not sure how to achieve this.

I have tried to do with the example in the example But it does not work.