Как можно избежать проблем с несинхронизированными данными при выполнении функций?

Чтобы избежать проблем с несинхронизированными данными при выполнении функций, можно использовать синхронизацию данных или блокирование состояния. 

Чтобы подкрасить первый элемент в пагинации при выполнении фильтра changeOption, независимо от текущей страницы пользователя, можно добавить условие проверки на активность первой страницы при рендеринге пагинации. Например, если первая страница всегда должна быть подсвечена, то добавьте класс активности на первую страницу при рендеринге пагинации.

Пример кода на React:

```jsx
const Pagination = ({ totalPages, currentPage, onPageChange }) => {
  const handlePageChange = (page) => {
    onPageChange(page);
  }

  return (
    <div className="pagination">
      <button className={currentPage === 1 ? 'active' : ''} onClick={() => handlePageChange(1)}>1</button>
      {Array.from({ length: totalPages }, (_, index) => {
        const pageNumber = index + 1;
        return (
          <button key={pageNumber} className={currentPage === pageNumber ? 'active' : ''} onClick={() => handlePageChange(pageNumber)}>{pageNumber}</button>
        );
      })}
    </div>
  );
}

export default Pagination;
```

В данном примере, если текущая страница равна 1, то первая кнопка пагинации будет иметь класс "active", что позволит выделить её визуально.

Ни какого рассинхрона не происходит, просто данные передаются в одну сторону, самое простое, в TheAdminPagination.vue повесить вотчер на totalPages, если меняется, сбрасывать на 1. В данном коде передавать prop currentPage из родителя не имеет ни какого смысла.