passes the page_size down from the parent component to the child component

public/js/components/Cis/Cms/Content.js

@@ -8,6 +8,7 @@ export default {
     return {
       content: null,
       maxPageCount: 0,
+      page_size: 10,
     };
   },
   methods: {
@@ -18,7 +19,7 @@ export default {
     },
   },
   created() {
-    Vue.$fhcapi.Cms.getNews(1, 10).then((result) => {
+    Vue.$fhcapi.Cms.getNews(1, this.page_size).then((result) => {
       this.content = result.data;
     });
 
@@ -27,7 +28,7 @@ export default {
     });
   },
   template: /*html*/ `
-    <pagination @page="loadNewPageContent" :maxPageCount="maxPageCount">
+    <pagination :page_size="page_size"  @page="loadNewPageContent" :maxPageCount="maxPageCount">
     <div v-html="content"></div>
     </pagination>`,
 };

public/js/components/Pagination/Pagination.js

@@ -2,11 +2,16 @@ export default {
   components: {
     paginator: primevue.paginator,
   },
+  emits: ["update:rows"],
   props: {
     maxPageCount: {
       type: Number,
       default: 0,
     },
+    page_size: {
+      type: Number,
+      default: 10,
+    },
   },
   data() {
     return {};
@@ -20,7 +25,7 @@ export default {
   template: /*html*/ `
     
     
-    <paginator @page="(data)=>$emit('page',{...data, page:data.page+1})" :rows="10" :totalRecords="maxPageCount" :rowsPerPageOptions="[10, 20, 30]" ></paginator>
+    <paginator v-model:rows="page_size" @page="(data)=>$emit('page',{...data, page:data.page+1})" :rows="page_size" :totalRecords="maxPageCount" :rowsPerPageOptions="[10, 20, 30]" ></paginator>
     <slot>
     Placeholder
     </slot>