Динамическое добавление, Двусторонние связывание

Динамически добавление поста в массив

Для input добавим стилистику через класс input
Для button добавим стилистику через класс btn

src\App.js

<template>
<div class="app">
<form>
<h4>Создание поста</h4>
<input type="text" class="input" placeholder="Название">
<input type="text" class="input" placeholder="Описание">
<button class="btn">Создать</button>
</form>
<div class="post" v-for="post in posts">
 <div><strong>Название:</strong> {{post.title}}</div>
 <div><strong>Описание:</strong> {{post.body}}</div>
</div>
<div>
</template>

<script>
export default{

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:{ 
}
</script>

<style>
классическое обнуление
убрать отступы на странице
* {
 margin: 0;
 padding: 0;
 box-sizing: border-box;
}

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

.input {
 width:100%;
 border:1px solid teal;
 padding: 10px 15px; 
 margin-top: 15px;
}
.form{
 display:flex;
 flex-direction:column;
}

убираем прилепление всего к краям страницы
на корню страницы
.app{
 padding: 20px;
}

.btn{
 margin-top: 15px;
 align-self: flex-end;по правому краю
 padding: 1opx 15px;
 background:none;
 color:teal;
 border: 1px solid teal;
}
</style>