компоненты vue не хотят склеится воедина

App.vue

<template>
    <post-redact/>
    <post-list/>
    <nav>
        <a href="#" class="logo">
            заметки
        </a>

        <a href="#" class="c">
            поиск
        </a>

    </nav>
    
    
</template>

<script>

import postredact from "./components/postredact.vue";
import postlist from "./components/postlist.vue";

export default{
    components: {
        postlist,postredact
    },
    data(){
        return{
            posts:[


            ],
            
            title:'',
            content:''
        }
    },

    methods:{
        createpost(){
            const date=new Date();
            const newpost={
                id:date.getDate()+'.'+date.getMonth()+'.'+date.getFullYear(),
                title:this.title,
                content:this.content,
            };
            this.posts.push(newpost);
            this.title='';
            this.content='';
        },
        
    }
}
</script>

<style>
    *{
        margin:0;
        padding:0;
        box-sizing: border-box;
    }

    .logo{
        font-size: 28px;
        margin: auto;
        
    }

    

    a{
        text-decoration: none;
        color:#000;
    }
    
    .c{
        margin: auto;
    }
    
    .c:hover{
        text-decoration: underline;
    }
    
    
    body{
        
        font-family: 'Montserrat', sans-serif;
    }

    nav{
        display: flex;
        margin-top: 12px;
    }

    
    
    
</style>

postlist.vue

<template>
    <div class="posts" v-for="post in posts">
            <div class="post">
                <div class="title">{{ post.title }}</div>
                
                {{ post.content }} <br>
                
                <div class="id">
                    {{ post.id }}
                </div>
            </div>
        </div>
</template>

<script>
export default{
    data(){
        return{

        }
    }
}
</script>

<style scoped>
    *{
        margin:0;
        padding:0;
        box-sizing: border-box;
    }

    .post{
        margin-bottom: 20px;
    }

    .title{
        font-size: 19px
    }

    .id{
        font-size: 14px;
    }
</style>

postredact.vue

<template>
    <div class="mid">
        <div class="createpost">
            <div class="create">
                создать пост <br>
            </div>
            <input v-bind:value="title" @input="title=$event.target.value" class="input" type="text" placeholder="тема">
            <input v-bind:value="content" @input="content=$event.target.value" class="input" type="text" placeholder="заголовок"> <br>
            <button class="btn">создать</button>

        </div>
    </div>
</template>

<script>
export default{
    data(){
        return{
            
        }
    }
}
    

</script>

<style>
    .createpost{
        margin: 20px 0 0 20px;
    }

    .posts{
        margin: 20px 0 0 20px;
    }

    .input{
        margin:0 5px 0 0
    }

    .create{
        font-size: 20px;
    }

    .btn{
        margin: 5px 0 0 0;
        background-color: white;
        border: 1px solid #000;
        padding: 5px;
        font-size: 16px;
    }

    .btn:hover{
        background-color: #519872;
    }
</style>

показывает только хедер.

[Vue warn]: Failed to resolve component: post-redact If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at

App.vue:11 [Vue warn]: Failed to resolve component: post-list If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at

с помощью стека пытался это исправить,не помогло