Модальное окно

Добавление модального окна куда нибудь
src\App.js

my-dialog

• создадим тег-компонент my-dialog
• Перенесём в слот post-form
• Прокиним пропс show и сделаем значение true

dialogVisible
модель передаём в директиву v-model в шаблон компонента в тег-компонент my-dialog, который по умолчанию false

Создадим заголовок, что страница с постами.
Под заголовком добавим кнопку, которая будет создавать пост (вызов модального окна). На кнопку повесим слушатель события нажатие. При нажатие на кнопку будет вызывать функцию showDialog, в которой будем менять значение dialogVisible на true.

При нажатии на кнопку — окно открывается.
При нажатии на свободное поле — окно закрывается

src\App

<template>
<div class="app">
<h1>Страница с постами</h1>
<my-button
 @click="showDialog"
 style="margin: 15px 0;" кнопка не должна прилипать к заголовку
>Создать пост</my-button>
<my-dialog v-model:show="dialogVisible">
<post-form
@create="createPost"
/>
</my-dialog>

<post-list 
:posts="posts"
@remove="removePost"
/>
<div>
</template>

<script>
import PostForm from "@/components/PostForm";
import PostList from "@/components/PostList";
export default{
components:{
 PostList,PostForm,
}
data(){
return {
posts:[
{id:1,title: 'Javascript', body: 'Описание поста'},
{id:2,title: 'Javascript 2', body: 'Описание поста 2'},
{id:3,title: 'Javascript 3', body: 'Описание поста 3'},
{id:4,title: 'Javascript 4', body: 'Описание поста 4'},
],
dialogVisible:false, модель для смены видимости модального окна
}
}
methods:{
 createPost(post,second,third){
  this.posts.push(post);
  this.dialogVisible = false; после создания поста закрывалось диалоговое окно
 }
 removePost(post) {
  this.posts = this.posts.filter(p => p.id !== post.id)
 }
 showDialog(){
  this.dialogVisible = true;
 }
}
}
</script>

<style>
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
.app{
 padding: 20px;
}
</style>