Vue web components attribute reflection

Hi there,
I’m trying how well you can build wc with vue.
One problem I’m having is attribute reflection.
Props are one way data binding. The attributes on the wc are automagically translated to props.

But what if I have something like a dialog. It has as open attribute which determines if the dialog is open or closed. Setting/removing the open attribute from outside should open/close the dialog.
The Dialog should also have a close button inside. Pressing the close button should remove the open attribute from the wc.

This would be trivial in lit. How do you do this in vue?

Also why can I access the open prop in the template with just open instead of It’s even possible to do @click=“open = !open”. This actually mutates the prop.