How to humanly sort when clicking on a column name?

Question

Vue.js

How to humanly sort when clicking on a column name?

<template>
  <div class="speedList">
    <table >
      <tr>
        <th><a >Abbreviation</a></th>
        <th><a >State</a></th>
        <th><a >Speed</a></th>

      </tr>
      <tr v-for="list in speedLists" :key="list.speed">
        <td>{{list.abbreviation}}</td>
        <td>{{list.state}}</td>
        <td>{{list.speed}}</td>
      </tr>

    </table>
  </div>
  <router-view/>
</template>

<script>
export default {
  name: "SpeedList",
  data: () => ({
    sortParam: '',
    speedLists: [
      {abbreviation: 'AL',state: 'Alabama', speed: '70mph'},
      {abbreviation: 'AK',state: 'Alaska', speed: '65mph'},
      {abbreviation: 'AZ',state: 'Arizona', speed: '65mph'}
    ],
})
}
</script>