0👍
It is unusual to define all your templates and script data in the file where you create & mount your Vue app, if you are learning I would suggest if you want to be able to read, use & contribute to other peoples code you need to extract your templates & script logic to individual component files. Even in small projects, this is still a good idea as it is the excepted convention on how to handle the structure of your data.
Also another suggestion would be naming your objects / entities with meaningful names so that they are more human readable in that, if someone else is to look at your project it is much easier for them to understand and work out what it is that your code does. Rather than use entities refer to what the entities actually are.
To answer your actual question, another way of doing this & to stick with the way most people would handle this is to to define & use reactive variable that can be used in v-show or v-if to conditionally render your dialog.
Something like this:
<button @click.prevent="dialogShow = !dialogShow"
<div v-show="dialogShow">
let dialogShow = ref(false)
Sorry for the compositions api formatting (I much prefer the compositions API)