How to get k-pagination work inside panel field plugin

Iā€™m trying to use the k-pagination inside my panel field plugin, but since Iā€™m new to Vue (and not the best on js) I have a hard time getting it to work. I have followed the docs and manage to get the total prop right and a items array that looks like the attached image when console.log it. I guess I donā€™t get the :key=ā€œitem.idā€ part on the list right because all the 61 items are visible.

My template inside index.js looks like this:

template: `
        <k-field class="k-elastic-field" :label="label">
          <k-input
            v-model="query"
            type="text"
            theme="field"
            icon="search"
          />

          <div class="k-elastic-field-results" v-if="query.length">
            Results:
            <ul class="m-grid m-grid--cards">
              <li class="m-grid__item" v-for="item in results" :key="item.id">
                <img :src="item._source.imageUrl">
                <div>{{ item._source.name }}</div>
              </li>
            </ul>

            <k-pagination
            align="center"
            :details="true"
            :page="1"
            :total="total"
            :limit="12"
            @paginate="fetch" />
          </div>
        </k-field>
      `

In the docs the fetch method looks like this:

fetch(pagination) {
      return this.$api
        .get('/projects.json', { page: pagination.page })
        .then(response => {
          this.items = response.data;
          this.total = response.total;
        });
    }

I donā€™t understand the second argument for the .get, what is the { page: pagination.page } for? Is it to tell the pagination component which page it should show?
My fetch method looks like this at the moment:

fetch(pagination) {
          return this.$api.get(this.endpoints.field + '/search?q=' + this.query).then(response => {
            this.results = response[0];
            this.total = response[0].length;
            console.log(this.results);
          });
        }

this.results give me the array I wrote about above. But what should I use as second argument in my .get function? If I use the same { page: pagination.page } the pagination component disappear.

I think I starting to understand this a little bit more now, but apparently not fully because it still does not work completely. Can someone please help my connect the missing dots?.

My index.php looks like this:

<?php
use Elasticsearch\ClientBuilder;
Kirby::plugin('demo/search', [
  'fields' => [
    'elastic' => [
      // each field can have a custom
      // api function that returns custom api routes
      // for the field. Those are scoped and
      // can be used for pretty much anything in the backend.
      'api' => function () {
        return [
          [
            'pattern' => 'search',
            'action' => function () {
              // put your elastic search here.
              // $query = $this->field()->value();
              $query = get('q');
              $index = esIndex();
              $esClient = esClient();
              $params = [
                'size' => 100,
                'index' => esIndex(),
                'type' => 'product',
                'body' => [
                  'query' => [
                    'simple_query_string' => [
                      'fields' => ['description', 'description.english^10', 'description.swedish^10', 'description.ngram^10', 'name', 'name.english^100', 'name.swedish^100', 'name.ngram^100', 'brand^1000', 'merchant^1000'],
                      'quote_field_suffix' => '.exact',
                      'query' => $query,
                      'default_operator' => 'AND'
                    ]
                  ]
                ]
              ];
          
              $search = esClient()->search($params);
              $results = CleanProductsArray($search['hits']['hits']);
              return [
                $results
              ];
            }
          ]
        ];
      }
    ]
  ]
]);

And my index.js like this:

panel.plugin('demo/search', {
  fields: {
    elastic: {
      props: {
        label: String,
        value: String,
        endpoints: Object
      },
      data() {
        return {
          query: this.value,
          results: [],
          total: 0
        };
      },
      watch: {
        value(value) {
          this.query = value;
        },
        query: {
          handler() {
            this.$emit('input', this.query);
            this.search();
          },
          immediate: true
        }
      },
      // created() {
      //   this.search({ page: 1 });
      // },
      methods: {
        search(pagination) {
          if (this.query.length === 0) {
            this.results = [];
            return;
          }

          this.$api
            .get(this.endpoints.field + '/search?q=' + this.query)
            .then(response => {
              this.results = response[0];
              this.total = this.results.length;

              console.log(this.results);
              console.log(this.total);
              console.log(this.pagination);
            });
        }
      },
      template: `
        <k-field class="k-elastic-field" :label="label">
          <k-input
            v-model="query"
            type="text"
            theme="field"
            icon="search"
          />

          <div class="k-elastic-field-results" v-if="query.length">
            Results:
            <ul class="m-grid m-grid--cards">
              <li class="m-grid__item" v-for="item in results" :key="item._id">
                <img :src="item._source.imageUrl">
                <div>id:<br>{{ item._id }}</div>
                <div>brand:<br>{{ item._source.brand }}</div>
                <div>name:<br>{{ item._source.name }}</div>
              </li>
            </ul>

            <k-pagination
            align="center"
            :details="true"
            :page="1"
            :total="total"
            :limit="12"
            @paginate="search" />
          </div>
        </k-field>
      `
    }
  }
});

The result is that I get a list of products from Elasticsearch which show up in the panel. But the pagination component is still ā€œdisconnectedā€ from the list. console.log(this.pagination) give me undefined, and all the products are showing, not just 12. Feels like Iā€™m missing something simpleā€¦