JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
  <form @submit.prevent="addUser">
    <input type="text" placeholder="Имя" required v-model="userName">
    <input type="text" placeholder="Фамилия" required v-model="userSurname">
    <button @submit="addUser">Добавить</button>
  </form>

  <table class="table">
    <thead>
      <tr>
        <th>№</th>
        <th v-for="header in headers" :v-key="header.name" :class="{'asc': header.sortDirection === 1, 'desc': header.sortDirection === 2}"
            @click="sortedDataBy(header.name)">{{ header.text }}</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(user, idx) in sortedData">
        <td v-text="idx + 1"></td>
        <td v-text="user.name"></td>
        <td v-text="user.surname"></td>
      </tr>
    </tbody>
  </table>
</div>

SCSS

.table {
  width: 100%;
  max-width: 600px;
  text-align: right;
  border-collapse: collapse;
  
  td {
    padding: 5px 0;
  }
  
  th {
    border-bottom: 1px solid #000;
    
    &:hover {
      background-color: rgba(0, 0, 0, 0.1);
    
      &:not(:first-child) {
        cursor: pointer; 
      }
    }
    
    &.asc::after {
      content: '\2191';
    }
    
    &.desc::after {
      content: '\2193';
    }
  }
}

Babel + JSX

/**
  Необходимо выполнить:
  1. добавление нового пользователя через форму над таблицей
  2. При клике на th делать сортировку списка по выбраному полю.
  Т.е. если по "Имя", то сортировать по имени, если по "Фамилия", то сортировка по фамилии.
  При клике по одному и тому же полю несколько раз подряд переключать сортировку по этому полю в порядке ASC => DESC => Выкл.

Дополнительно, по желанию:
3. <select> с выбором отображаемого количества элемента - 5, 10, 50.
3. Пагинация, если часть элементов оказалась скрытой

Для выполнения необходимо использовать computed-свойства
*/

new Vue({
  data: () => ({
    users: [
			{
      	name: 'Пётр',
      	surname: 'Васильев',
      },
      {
      	name: 'Игорь',
      	surname: 'Петров',
      },
      {
      	name: 'Антон',
      	surname: 'Павлов',
      }
    ],
    userName: null,
    userSurname: null,
    headers: [
    	{name: 'name', text: 'Имя', isSorted: false, sortDirection: 0},
      {name: 'surname', text: 'Фамилия', isSorted: false, sortDirection: 0}
    ],
    lastSortedColumn: null
  }),
  computed: {
		sortedData: function () {
    	let isSorted = this.headers.find(h => h.isSorted)
      console.log('isSorted', isSorted)
      let sorted
      if (typeof isSorted !== 'undefined') {
        switch (isSorted.sortDirection) {
          case 0: return this.users
          case 1: {
          	console.log('case 1')
          	return this.users.slice().sort(this.compare(isSorted.name))
          }
          case 2: {
            console.log('case 2')
          	return this.users.slice().sort(this.compare(isSorted.name, false))
          }
        }
      } else {
      	return this.users
      }
    }
  },
  methods: {
	  addUser: function () {
    	this.users.push({name: this.userName, surname: this.userSurname})
      this.userName = this.userSurname = null
    },
    sortedDataBy: function(name) {
    	if (this.lastSortedColumn === null) {
      	this.lastSortedColumn = name
      }
      if...