Why is 1 page not loading during pagination?

Question

JavaScript

Good evening . I'm doing pagination for the gallery.
Pagination worked, but refreshing the page broke everything.
console outputs:

Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "posts"

here is a code example:

<template>
  <div id="app">
    <header>
      <h1>Vue.js SPA</h1>
    </header>




<div class="content">
    
    <div 
    class="All_img_on_page"
     v-for="picture in paginatedData"> 
      <img 
      :src="picture.picture"
      class="pic_on_page"> 
      
 <button 
                  :disabled="pageNumber === 0" 
                  @click="prevPage">
                  Previous
              </button>
              <button 
                  :disabled="pageNumber >= pageCount -1" 
                  @click="nextPage">
                  Next
              </button>
    </div>
 </div>
    
  



</div>
</template>

<script>
import axios from 'axios'
export default {
         data() {
return {
         posts: null,
         need_data: 'http://localhost:8080/src/list.json',
         pageNumber: 0

}
},
 props:{
          
    posts:{
      type:Array,
      required:false
    },
    size:{
      type:Number,
      required:false,
      default: 10
    }
          
},   //props
  
 methods: {
                  
getAllPosts() {
axios.get(this.need_data)
.then(response => {
this.posts = response.data;
console.log('json', response.data);

}) //1then
.catch(error => {
console.log('ошибка загрузки json');
console.log(error);
})
         
},
          
nextPage(){
this.pageNumber++;
},
         
prevPage(){
this.pageNumber--;
}              
        
},
  created() {
         this.getAllPosts();      
},          
            
computed: {
         
   pageCount(){
      let l = this.posts.length,
          s = this.size;
          return Math.ceil(l/s);

},
paginatedData(){
    const start = this.pageNumber * this.size,
          end = start + this.size;
         console.log('start', start);
          console.log('end', end);
    return this.posts.slice(start, end);
}         
        
},
         
     
} //default

</script>

Answer 1

You have the posts array in both props and data. Do not do it this way.
Further. At the time of component initialization, posts === undefined, because the array will be filled only after the getAllPosts method is processed