Декомпозиция

src\components\PostList.vue
форма для создания или редактирования поста

список постов и модели из данных компонента app не переносим в компонент PostList

Props

компонент PostList является переиспользуемым. В данном примере внутри себя он не должен содержать список постов поскольку эти посты должны поступать откуда то извне (Массив постов).
На одной странице один список постов, на другой — другой список постов. Они разные. Таким образом компонент не содержит модель постов, но он извне получает некий аргумент. Как функция принимает какой-то аргумент, так же наш компонент может принимать какие то параметры, аргументы и в контексте vue они называются пропсы Props.

Массив и модели и функция для создания поста остаются пока в компоненте App.

src\components\PostList.vue

<template>
<div class="post" v-for="post in posts">
 <div><strong>Название:</strong> {{post.title}}</div>
 <div><strong>Описание:</strong> {{post.body}}</div>
</div>
</template>

<script>
export default{
 props:{
  posts:{
   type:Array,
   required: true, говорит обязательно или нет 
}
}
}
</script>

<style>
.post{
 padding: 15px;
 border: 2px solid teal; темно зелёная рамка
 margin-top:15px; отступ сверху
}
</style>

src\components\PostForm.vue

<template>
<div class="app">
<form @submit.prevent>
<h4>Создание поста</h4>

<input 
type="text" 
v-bind:value="title"
@input="title=$event.target.value"
class="input"
placeholder="Название">

<input 
type="text" 
v-bind:value="body"
@input="body=$event.target.value"
placeholder="Описание">

<button class="btn" @click="createPost">Создать</button>
</form>
</template>

<script>
export default{
methods:{
 createPost(){
 const newPost={
  id:Date.now(),уникальный из даты
  title:this.title,
  body:this.body,
 }
 this.posts.push(newPost);
 this.title='';
 this.body='';
}
 inputTitle(event){
  this.title = event.target.value;
} 
}
</script>

<style >
.input {
 width:100%;
 border:1px solid teal;
 padding: 10px 15px; 
 margin-top: 15px;
}
.form{
 display:flex;
 flex-direction:column;
}
.btn{
 margin-top: 15px;
 align-self: flex-end;
 padding: 1opx 15px;
 background:none;
 color:teal;
 border: 1px solid teal;
}
</style>