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

Компонент App

src\App.vue

• импортирование в компонент других компонентов в секции script
• регистрация компонента в поле components компонента export default

<template>
<div class="app">
<post-form/>
<post-list/>
<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'},
]
}
}
methods:{
 добавление в массив через push
 this.posts.push(newPost);
 очистка текста после добавления
 this.title='';
 this.body='';
}
 inputTitle(event){
  this.title = event.target.value;
} 
}
</script>

<style>
классическое обнуление
убрать отступы на странице
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}
убираем прилепление всего к краям страницы
на корню страницы
.app{
 padding: 20px;
}
</style>