How can I change pages when searching by id for an element in a table? Vue js

I have a problem, I work with vue js, vuetify2, I have a table of elements with a pagination, currently there are 2 pages, but there can always be more.
I have a modal with a “See more” button in a component, from that button I emit an event passing the id, I take the id in the component where the table is, and I have a method where I look for the id, the values, the emit and all that works well, it emits and listens well.
This method:

Component moreInfo:

showMoreInfo() {
      store.dispatch('mapState/showMoreInfo')
      const elId = this.arrInfo.id
      this.$root.$emit('elSelected', elId)
      console.log('Event elSelected with ID:', elId)

      this.$nextTick(function() {
        store.dispatch('mapState/setExpanded', this.arrInfo)
      })
    },

Component table:

 calculateElPage(elId) {
       const foundEl = this.arr.find(item => item.id === elId)
 
       if(foundEl) {
         const index = this.arr.indexOf(foundEl)
         console.log('INDEX', index);
         const elPage = Math.floor(index / this.itemsPerPage) + 1
         console.log('ENTITYPAGE', elPage);
 
         if (elPage === this.page) {
           this.page = elPage
           console.log('PAGE', this.page);
      }
        return entityPage
      } else {
        return -1
      }
    },

mounted() {
    this.$root.$on('elSelected', (elId) => {
      const elPage = this.calculateElPage(elId)
      console.log('Element with ID', elId, 'is on the page:', elPage);
    })
}

scrollToRowExpanded(el) {
      //If the action is a display, scroll
      if (el.value) {
        //It takes a while for vuetifiy to add the row and expanded classes
        setTimeout(() => {
          const selectedRow = document.querySelector(
          '.v-data-table__expanded__content'
          ).previousElementSibling
          const tableHeader = document.querySelector('.v-data-table-header')
            .clientHeight
          const barToScroll = document.querySelector(
            '#entities__table .v-data-table__wrapper'
          )
          selectedRow.scrollIntoView()
          barToScroll.scrollBy({
            top: -tableHeader,
            behaviour: 'smooth'
          })
        }, 10)
      }
    },

This previously worked but only if the element is on page 1, so I had to implement new logic