How to use search button with a vue js datepicker in html?

Question

I am working with a very basic html/VueJs app.

After clicking the "Search" button, the table below it is not rendered. However, if the From and To dates in the datepicker are refreshed (cleared/changed) the table gets populated.

Where am I doing wrong? I want the Search button to render the filtered html table rows.

Highlevel code details -

1. Date picker to input start and end dates.
2. Search button with a v-on:click event to filter rows from a html table, based on the input date range.
3. Table header and rows being populated.

    **HTML Code Snippet -**
<div id="myTable">
  
  <vuejs-datepicker wrapper-class="inline" placeholder="From Date" format="MM/dd/yyyy" :clear-button="false" v-model='startDate'></vuejs-datepicker>
  <vuejs-datepicker wrapper-class="inline" placeholder="To Date" format="MM/dd/yyyy" :clear-button="false" v-model='endDate'></vuejs-datepicker>

  <!-- Search Button -->
   <input type="button" v-on:click="fetchRows()" value="Search">
  <table> 
 
  <thead>
   <tr>
    <th v-for="col in columns" v-on:click="sortTable(col)">{{col}}</th>
   </tr>
  </thead>
  <tbody>
   <tr v-for="row in rows2">
    <td v-for="col in columns">{{row[col]}}</td>
   </tr>
  </tbody>
  </table>

   </div>