Как по человечески сделать сортировку при нажатии на название столбца?
<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>