Artem0071

После отправки просто делай редирект вместо вывода сообщения на нужную страницу

Через пропы

Родитель:

<child-component 
   :firstProp="firstProp"    // передаем параметр
</child-component>

Дочерний:

props: ['firstProp'] // получаем параметр

Вы все делаете не так :)

Советую Вам изучить Vue cli

Чтобы добавить компонент в компонент, необходимо использовать , а в роутах уже прописывать сами компоненты
Либо чтобы вставить отдельно компонент в компонент, нужно в родительском компоненте прописать что то типа:

import myHeader from './header.vue'
<script>
export default {
    components: {myHeader} // и вызывать этот компонент уже как <my-header></my-header>
}
</script>

-----

В вашем случае родительский компонент должен иметь следующий вид:

<template>
    <div class="page">
        <page-header></page-header>   // <-не забудь изменить
    </div>
</template>

<script>
import PageHeader from './header.vue'
export default {
  name: 'page',
  components: { PageHeader  }
}
</script>

Вы немного не то делаете

var app = new Vue({
                el: '#app',
                data: {
                    title: value.title,
                    subtitle: value.subtitle,
                    date: value.datePostCreate,
                    text: value.text
                }
            });

Этот кусок у вас инициализирует Vue. Поэтому не нужно его прогонять несколько раз

Вот каркас для вашего приложения

<div id="app">
               
</div>
var app = new Vue({
                el: '#app'
            });

Идем дальше

Во вью создайте метод mounted() - он инициализируется при загрузке

mounted(){
 // ....
}

Вот там где // .... и пишите ваш код

А для того чтобы блоки повторялись, есть специальный метод v-for

В итоге, я так полагаю, у вас должно получиться что то в этом роде:

<div id="app">
  <div v-for="item in items">
     <p>{{ item.title }}</p>
     <p>{{ item.subtitle }}</p>
     <p>{{ item.date }}</p>
     <p>{{ item.text }}</p>
  </div>
</div>

var app = new Vue({
                el: '#app',
                data: {
                    items: [];            //здесь будет массив с вашими данными
                },
                mounted(){
                     this.$http.get("http://localhost:3000/posts")          // это использует vue-router. можно и по другому, но как по мне это самый удобный способ
                                   .then(res => {
                                        this.items = res.body         // здесь заносим ваши данные в массив
                                   })
            });

В общем приблизительно так это должно выглядеть

<button @click="toNextPage">Next page</button>
....

methods: {
    toNextPage(){
           setTimeout(function() { this.$router.push('/next') }, 1000);

В первом в теге после to="/" написать exact
У вас все пункты содкржат "/", поэтому перый выделяется вместе с остальными

:newchapter="foo(3)"
попробуй заменить на
@newchapter="foo(3)"

@ - это что то вроде действия, и при нем сработает метод
в дочернем компоненте ты эмитом инициализируешь "дествие", а родитель как бы его перехватывает
Как то так)