Scoped slots in Vue 3

I am getting: 'pageNumber' is defined but never used

here is my contact page:

<PaginateItems>
      <template #data="{ pageNumber }">
        <ListItems :listItems="contacts" type="contact" />
      </template>
    </PaginateItems>

and here is my PaginateItems

<template>
  <div>
    <div class="flex flex-row justify-center">
      <!-- Previous -->
      <button class="p-2 border mr-2">Previous</button>
      <span v-for="(item, index) in new Array(10)" :key="index">
        <button class="p-2 border mr-2" @click="pageNumber = index + 1">
          {{ index + 1 }}
        </button>
      </span>
      <!-- Next -->
      <button class="p-2 border mr-2">Next</button>
    </div>
    <slot name="data" :pageNumber="pageNumber" />
  </div>
</template>

<script>
export default {
  name: "PaginateItems",
  data() {
    return {
      pageNumber: 1,
    };
  },
};
</script>

my contacts page doesn't seem to know what pageNumber is?!