JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.12/vue.min.js"></script>
<div id="app">
  <label class="filter">
    Континент:
    <select v-model="filters.continent.value">
      <option value="">-- все --</option>
      <option v-for="n in continents">{{ n }}</option>
    </select>
  </label>
  <label class="filter">
    Страна:
    <input v-model="filters.name.value">
  </label>
  <table>
    <tr>
      <th
        v-for="n in headers"
        @click="setSort(n.name)"
        :class="{ sort: sort.options[n.name] }"
      >{{ n.title }}</th>
    </tr>
    <tr v-for="n in countriesFilteredAndSorted">
      <td>{{ n.id }}</td>
      <td>{{ n.name }}</td>
      <td>{{ n.population }}</td>
      <td>{{ n.continent }}</td>
    </tr>
  </table>
</div>

CSS

th.sort {
  cursor: pointer;
}

td {
  padding: 10px;
  border: 1px solid silver;
}

.filter {
  display: inline-block;
  padding: 10px;
  margin: 10px;
}

JavaScript

new Vue({
  el: '#app',
  data: {
    countries: [
      { name: 'Япония', population: 126.2, continent: 'Азия' },
      { name: 'Франция', population: 67, continent: 'Европа' },
      { name: 'Италия', population: 60.8, continent: 'Европа' },
      { name: 'США', population: 327.6, continent: 'Северная Америка' },
      { name: 'Малайзия', population: 31, continent: 'Азия' },
      { name: 'Вьетнам', population: 92.5, continent: 'Азия' },
      { name: 'Канада', population: 37.3, continent: 'Северная Америка' },
      { name: 'Мексика', population: 133.1, continent: 'Северная Америка' },
      { name: 'Норвегия', population: 5.3, continent: 'Европа' },
      { name: 'Китай', population: 1395.4, continent: 'Азия' },
    ].map((n, i) => ({ id: i + 1, ...n })),
    filters: {
      name: {
        value: '',
        check: (val, filterVal) => val.toLowerCase().includes(filterVal.toLowerCase()),
      },
      continent: {
        value: '',
        check: (val, filterVal) => val === filterVal,
      },
    },
    sort: {
      key: 'name',
      reverse: false,
      options: {
        name: (a, b) => a.localeCompare(b),
        continent: (a, b) => a.localeCompare(b),
        population: (a, b) => a - b,
      },
    },
    headers: [
      { name: 'id', title: '#' },
      { name: 'name', title: 'страна' },
      { name: 'population', title: 'население, млн. чел.' },
      { name: 'continent', title: 'континент' },
    ],
  },
  computed: {
    continents() {
      return [...new Set(this.countries.map(n => n.continent))];
    },
    countriesFilteredAndSorted() {
      const filteredCountries = Object
        .entries(this.filters)
        .reduce((countries, [ key, { value, check } ]) => {
          return value
            ? countries.filter(n => check(n[key], value))
            : countries;
        }, this.countries);

      const { sort: { key, options, reverse } } = this;
      const compare = options[key];

      return filteredCountries.sort((a ,b) =>...