Paginate Alpine json data

          document.addEventListener('alpine:init', () => {

            Alpine.data('aData', () => ({

                search: "",

                pageNumber: 0,

                start: '',

                end: '',

                size: 15,

                total: '',

                rowData: 'https://api/...',

                rowItems: '',

                pages: null,

                sortAsc: '',

                sortCol: '',

                  listData() {

                    this.start = this.pageNumber * this.size,

                    this.end = this.start + this.size;

                    this.rowItems = this.rowData;

                    let data = null;

               if (this.search == "") {

                        this.rowItems = this.rowData;

                        this.total = this.rowItems.length;

                        let p = Math.ceil(this.rowItems.length / this.size);

                        this.pages = p;

                        let data = this.rowItems.slice(this.start, this.end);

                        return data;

               } else {

                        const data = this.rowItems.filter((item) => {

                          return (

                                    item.room_no

                                ).toLowerCase()

                                .includes(this.search.toLowerCase())

                        })

                            this.total = data.length;

                            let p = Math.ceil(data.length / this.size);

                            this.pages = p;

                            this.viewPage(0);

                        return data.slice(this.start, this.end);

                    }

                }