Parent and Component not working

Hi I have a table which I want to implement a pagination also. This is my parent vue page

<template>
    <div class="wrapper-content">
        <div class="container is-fluid m-t20">
            <div class="columns">
                <div class="column is-fullwidth">
                  <h3>Registration Request</h3>
                </div>
            </div>

            <div class="column is-fullwidth">
                <h4>List of all the request</h4>
                <table class="table">
                    <thead>
                      <tr>
                        <th v-for="headerForAllList in tableHeaderForAllList">{{headerForAllList}}</th>
                      </tr>
                    </thead>

                    <tbody>
                      <tr v-for="item in filtered ">
                        <td>{{ item.ID }}</td>
                        <td>{{ item.Name }}</td>
                        <td>{{ item.Role }}</td>
                        <th v-if="item.Status == 'Approved'" >
                            <span class="tag is-info">{{item.Status}}</span>
                        </th>
                        <th v-if="item.Status == 'With Pending Request'" >
                            <span class="tag is-warning">{{item.Status}}</span>
                        </th>
                      </tr>
                     </tbody>

                    <pagination></pagination>

                </table>

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

<script>
import Pagination from './Pagination';
export default {
    components: { 'pagination': Pagination },
    data() {
        return {
            items: [
             { ID: 1, Name: 'Filport Express', Role: 'Shipper', Status: 'Approved'},
             { ID: 2, Name: 'Filport Express', Role: 'Shipper', Status: 'With Pending Request'},
             { ID: 3, Name: 'Filport Express', Role: 'Shipper', Status: 'Approved'},
             { ID: 4, Name: 'Filport Express', Role: 'Shipper', Status: 'With Pending Request'},
             { ID: 5, Name: 'Filport Express', Role: 'Shipper', Status: 'Approved'},
             { ID: 6, Name: 'Filport Express', Role: 'Shipper', Status: 'With Pending Request'},
             { ID: 7, Name: 'Filport Express', Role: 'Shipper', Status: 'Approved'},
             { ID: 8, Name: 'Filport Express', Role: 'Shipper', Status: 'With Pending Request'},
             { ID: 9, Name: 'Filport Express', Role: 'Shipper', Status: 'Approved'},
             { ID: 10, Name: 'Filport Express', Role: 'Shipper', Status: 'With Pending Request'},
             { ID: 11, Name: 'Filport Express', Role: 'Shipper', Status: 'Approved'},
             { ID: 12, Name: 'Filport Express', Role: 'Shipper', Status: 'With Pending Request'},
             { ID: 13, Name: 'Filport Express', Role: 'Shipper', Status: 'Approved'},
             { ID: 14, Name: 'Filport Express', Role: 'Shipper', Status: 'With Pending Request'},
             { ID: 15, Name: 'Filport Express', Role: 'Shipper', Status: 'Approved'},
             { ID: 16, Name: 'Filport Express', Role: 'Shipper', Status: 'With Pending Request'},
            ],
            tableHeaderForAllList: ["ID", "Name", "Role", "Status"]
            
        }
    }   
}
</script>

This is my Pagination.vue

<template>
    <nav class="pagination">
      <a class="pagination-previous" @click="paginate('previous')" :disabled="start <= 0">Previous</a>
      <a class="pagination-next" @click="paginate('next')" :disabled="limit >= total">Next page</a>
    </nav>
</template>

<script>
    export default {
        data() {
            return {
                total: 16,
                pagination: 2,
                start: 0,
                limit: 2
            }
        },
        computed: {
            filtered: function(){
                return this.items.slice(this.start, this.limit)
            }
        },
        mounted: function() {
            this.limit = parseInt(this.pagination);
        },
        
        methods: {
            paginate: function(direction) {
                if(direction === 'next') {
                    this.start += parseInt(this.pagination);
                    this.limit += parseInt(this.pagination);
                }
                else if(direction === 'previous') {
                    this.limit -= parseInt(this.pagination);
                    this.start -= parseInt(this.pagination);
                }
            }
        }
    }
</script>

Problem in console

 Property or method "filtered" is not defined on the instance but referenced during render.

But when I try to transfer code below, still doesn't work! All data has seen all.

computed: {
     filtered: function(){
     return this.items.slice(this.start, this.limit)
  }  
}

I hope you can help me. Thanks in advance!