JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@5.x/css/materialdesignicons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@2.3.10/dist/vuetify.min.css">
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.3.10/dist/vuetify.min.js"></script>
<div id="app">
  <v-app>
    <v-data-table
      :headers="headers"
      :items="desserts"
      :sort-by.sync="sortBy"
      :sort-desc.sync="sortDesc"
      @update:options="handleOptionsUpdate">
    </v-data-table>
  </v-app>
</div>

JavaScript

new Vue({
  vuetify: new Vuetify(),
  data: () => ({
    headers: [{
      text: 'Dessert (100g serving)',
      align: 'start',
      sortable: false,
      value: 'name'
    }, {
      text: 'Calories',
      value: 'calories'
    }, {
      text: 'Fat (g)',
      value: 'fat'
    }],
    desserts: [{
      name: 'Frozen Yogurt',
      calories: 200,
      fat: 6.0
    }, {
      name: 'Ice cream sandwich',
      calories: 200,
      fat: 9.0
    }, {
      name: 'Eclair',
      calories: 300,
      fat: 16.0
    }, {
      name: 'Cupcake',
      calories: 300,
      fat: 3.7
    }],
    sortBy: [],
    sortDesc: []
  }),
  methods: {
    handleOptionsUpdate({
      sortBy,
      sortDesc
    }) {
      if (
        sortBy[0] === this.sortBy[0] &&
        sortDesc[0] === this.sortDesc[0]
      ) return

      if (sortBy[0] && sortDesc[0] === false) {
        this.sortDesc = [true]
        return
      }

      if (sortBy.length === 0 && sortDesc.length === 0) {
        this.sortBy = [this.sortBy[0]]
        this.sortDesc = [false]
        return
      }

      if (sortBy[0] && sortDesc[0] === true) {
        this.sortBy = []
        this.sortDesc = []
        return
      }
    }
  }
}).$mount('#app')