Vuetifyのデータテーブルのソートボタンを自由な場所に配置する方法（外部ソート）

データテーブル・コンポーネントのデフォルトでのソート機能のUIは以下のようになっている。

このソートボタンを別の場所で使いたい場合や、
デザインを自由に変更したい場合の実装方法について。

実装方法

script内のdata内で以下プロパティを定義。
sortByプロパティは、対象にしたいカラム名を指定する。

sortBy: 'name',
sortDesc: false

method内で以下の関数を定義。（名前は自由）
sortDescの真偽値を反転させている。

methods: {
  toggleOrder () {
    this.sortDesc = !this.sortDesc
  }
}

template内のv-data-tableタグに、
sort-by.syncオプションと
sort-desc.syncオプションを追加。

<v-data-table
  :headers="headers"
  :items="items"
  :sort-by.sync="sortBy"
  :sort-desc.sync="sortDesc"
></v-data-table>

あとは適当にボタンなどを配置し、
クリックイベントなどで、先ほどmethodで定義した関数（toggleOrder）
を発火させることでソートが切り替わるようになる。
以下のサンプルでは、v-iconを二つ配置し、
ソートの昇順と降順でアイコンを切り替えている（上矢印と下矢印）

<v-btn
  icon
  small
  color="grey darken-1"
  class="ml-3"
  @click="toggleOrder"
  ><v-icon v-if="sortDesc">mdi-arrow-down</v-icon
  ><v-icon v-else>mdi-arrow-up</v-icon></v-btn
>