nuxt ページネーションが実行できない

nuxt.js laravelでページネーションを実行したいです。
１ページ５件表示されるようにし、２ページ目に移行した際に、６件目から１０件目を表示したいのですが、表示されません。
アドバイスをいただきたいです。

<template>
 <div class="container">
  <v-row justify="center">
  <div class="list">
       <div class="title">
         <h2>一覧結果</h2>
       </div>
      <div class="wrapper">    
        <div class="name" > 
          <div class="post_name" v-for="post in this.posts" >
            <div class="box"> <nuxt-link :to="`post/${post.id}`">     
              {{post.name}}</nuxt-link><div class="content2">
               {{post.content2}}
              </div><img v-bind:src="post.path" class="image" >
              </div>             
          </div>
        </div>
      </div> 
  </div> 
  <v-pagination
      v-model="page"
      :length=5
      @input = "pageChange"
    ></v-pagination>   
  </v-row>
  </div>
  
</template>

<script>
import axios from 'axios';
export default {
  created(){
  axios.get(`http://127.0.0.1:8000/api/category/${this.$route.params.id}`)
          .then(response => {
          this.posts= response.data.posts.slice(0,this.pageSize);
          this.length = Math.ceil(this.posts.length/this.pageSize);
          this.id = response.data.id
          this.name= response.data.name
          this.path = response.data.path
          console.log(response.data)
          });
          
  },
  
 
  
  data () {
    return {
     params:'',
     posts:[],
     post:[],
     id:'',
     name:'',
     content:'',
     path:'',
     page:1,
     pageSize:5,
     length:0,
    }
  },
  mounted: function(){
    this.lists = new Array(99).fill().map((v,i)=> {
    return { id : i,};
  });
    this.length = Math.ceil(this.post.length/this.pageSize);

  this.posts = this.posts.slice(0,this.pageSize);
 
  },
  methods: {
    returnPage() {
      this.$router.go(-1);
    },
    pageChange: function(pageNumber){
    this.posts = this.post.slice(this.pageSize*(pageNumber -1), this.pageSize*(pageNumber));
  },
    
  },
  }

</script>
<style scoped>
.container{
  background-color:#fff;
  height:120vh;
  width:100%;
}
.list{
  text-align:left;
  padding-top:10%;
}
.title{
  color:#000;
  text-align:center;
}

.post_name{
  top:10%; 
  width:20%;
  display:flex;
  float:left;
  margin:0 5%;
} 
  

.name{
     width:50%;
     height:50%;
     padding-left:20px;
}
.name img{
  position: relative;
    top: 0%;
    left: 3%;
    width: 100%;
}
.wrapper{
  width: 200%;
}

 body{
 background-color:#0F0;
 }
 .box a{
   display:flex;
   flex-direction:column;
   padding-top:10%;
 }
 .box{
   margin:0 auto;
 }
 .content2{
   color:#000;
 }
 
 </style>