[Vuejs]-B-pagination is loading all data on first load (vuejs)

You need to use paginatedItems instead of paginatedProducts that you have used in paginate() method, and also, items, instead of products, since you haven’t defined any of these in data() of the component. Also, when you call getItems() the order of the assignments and method calls is wrong.

async getItems() {
  this.page = 1;

  let respond = await getting data from axio;
  if (respond){


      this.items = respond

     // this.paginatedItems = this.items; //no need to have this, you assign then all items 
      this.totalRows = this.items.length;
      this.pageCount();
      this.paginate(this.perPage, 1); //this should be called last
   }
},

full code:

    <a-row class="my-1" v-if="data.length > 0">
      <a-col v-for="(item, index)  in paginatedItems" :key="index">
          <b-card>
             <div class="title">{{ item.name }}</div>
           </b-card>
        </a-col>
     </a-row>
    <a-row>
    <b-pagination @change="onPageChanged" :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
    </a-row>


        import Paginate from "vuejs-paginate";

    export default {
        components: {
            Paginate
        },
        data() {
            return {
                items: [],
                paginatedItems: [],
                currentPage: 1,
                perPage: 3,
                totalRows: 0,
                id: 0
            }
        },
        mounted(){
            this.paginate(this.perPage, 1)
        },
        created() {

            if (this.$route.query.id) {
                this.id = this.$route.query.id;
                this.getItems();
            }
        },
        methods: {
            onPageChanged(page){
                this.paginate(this.perPage, page - 1)
            },
            onChangeCurrent(current) {
                this.currentPage = current;
            },
            async getItems() {
                this.page = 1;

                let respond = await getting data from axio;
                if (respond){


                    this.items = respond

// this.paginatedItems = this.items; //no need to have this, you assign then all items
                    this.totalRows = this.items.length;
                    this.pageCount();
                    this.paginate(this.perPage, 1); //this should be called last
                }
            },
            paginate (page_size, page_number) {
                let itemsToParse = this.items
                this.paginatedItems = itemsToParse.slice((page_number -1) * page_size, page_number * page_size);
            },
            pageCount() {
                let l = this.totalRows,
                    s = this.perPage;
                return Math.floor(l / s);
            }
        },
    }

But it might be better to use paginatedItems as computed property and remove on onPageChanged method for the event:

    export default {
    components: {
        Paginate
    },
    data() {
        return {
            items: [],
            currentPage: 1,
            perPage: 3,
            id: 0
        }
    },
    mounted(){

    },
    created() {

        if (this.$route.query.id) {
            this.id = this.$route.query.id;
            this.getItems();
        }
    },
    computed: {
        paginatedItems(){
            return this.items.slice((this.currentPage - 1) * this.perPage, this.currentPage * this.perPage);
        },
        totalRows(){
            return  this.items.length;
        },
        pageCount() {
            let l = this.totalRows,
                s = this.perPage;
            return Math.floor(l / s);
        }
    },
    methods: {
        onChangeCurrent(current) {
            this.currentPage = current;
        },
        async getItems() {
            this.page = 1;

            let respond = await getting data from axio;
            if (respond){
                this.items = respond

            }
        },


    },
}

Edit: there is issue also with the slice, since you would always initially skip first three items, so instead of:

this.paginatedProducts = itemsToParse.slice(page_number * page_size, (page_number + 1) * page_size);

should be:

this.paginatedProducts = itemsToParse.slice((page_number - 1) * page_size, page_number * page_size);