How to sort a table by using dropdown menus (starting date - end date) for VueJS? - vuejs2

Question

I am new to VueJS. How would I be able to sort a table using VueJS? I have four dropdown menus (to select starting month and starting year to an ending month and year) then display/update that to the table? I am grabbing data from a Sqlite database btw. My goal is to select a timeframe, then have it display in the table. I have been researching and watching videos on Youtube. But I have not been able to find a solution. Any help would be appreciated.
<template> <div class="time">
<h2></h2>
<center>
<span>Select Timeframe: </span>
<select v-model="startMonth">
<option disabled value=" ">Month</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select v-model="startYear">
<option disabled value=" ">Year</option>
<option>2017</option>
<option>2018</option>
</select> -
<select v-model="endMonth">
<option disabled value=" ">Month</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select v-model="endYear">
<option disabled value=" ">Year</option>
<option>2017</option>
<option>2018</option>
</select>
<button>Go</button> <br><br>
<span>start: {{ startMonth }}</span>
<span>{{ startYear }} - </span>
<span>{{ endMonth }}</span>
<span>{{ endYear }}</span>
<table class = "table table-bordered table-sptried table-condensed">
<thead>
<tr>
<th>Month</th>
<th>Day</th>
<th>Year</th>
<th>Time</th>
<th>Activity</th>
</tr>
</thead>
<tbody>
<tr v-for="client in clients" :key="client.id">
<td>{{client.Months}}</td>
<td>{{client.Days}}</td>
<td>{{client.year}}</td>
<td>{{client.Time}}</td>
<td>{{client.Activity}}</td>
</tr>
</tbody>
</table> </center> </div> </template>

Answer 1

You can use computed feature of Vue. Instead of reading directly from clients, you can create computed variable (for example sortedClients). Then you can do anything in this function
For example:
computed: {
sortedClients: function() {
function compare(a, b) {
const aTime = <get time from a>
const bTime = <get time from b>
if (aTime < bTime)
return -1;
if (bTime > bTime)
return 1;
return 0;
}
return this.clients.sort(compare);
}
}
For time conversion, you can use https://momentjs.com/