How to get vuejs2 to refresh templates when data updates

Question

I have a component that I wish to use to search for members in a database. The page is currently fairly simple, a form with a handful of search parameters and a button that fires off an AJAX call to the server, which will return a JSON list of members matching the search criteria.

However, whenever I update the data, the template does not display the search results. If I hard-code the search results into the data, it displays the records just fine.

Is there a way to trigger a refresh of a template in a component, or if I am taking the wrong approach, would ye be able to point me in the right direction?

const MemberSearchScreen = {
  template: `
    <div>
        <form id="membersearchform" class="pure-form">
            <input type="text" name="memberid" pattern="[0-9]" placeholder="memberid" v-model="searchcriteria.memberid"/>
            <input type="text" name="surname" placeholder="Surname" v-model="searchcriteria.surname"/>
            <input type="text" name="addressline1" placeholder="Addressline1" v-model="searchcriteria.addressline1"/>
            <input type="text" name="county" placeholder="County" v-model="searchcriteria.country"/>
            <input type="text" name="postcode" placeholder="Postcode" v-model="searchcriteria.postcode"/>
            <button class="pure-button pure-button-primary" v-on:click="submitsearch">Search</button>
        </form>
        <div id="membersearchresults">
            <table class="pure-table">
                <thead>
                    <tr>
                        <th>MemberID</th>
                        <th>Name</th>
                        <th>Address</th>
                        <th>County</th>
                        <th>Postcode</th>
                        <th>Home Phone</th>
                        <th>Mobile Phone</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="searchresult in searchresults">
                        <td>{{searchresult.memberid}}</td>
                        <td>{{searchresult.title + ' ' + searchresult.forename + ' ' + searchresult.surname}}</td>
                        <td>{{searchresult.addressline1}}</td>
                        <td>{{searchresult.county}}</td>
                        <td>{{searchresult.postcode}}</td>
                        <td>{{searchresult.homephone}}</td>
                        <td>{{searchresult.mobilephone}}</td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

  `,

  data: function () {
        return {
                searchcriteria: {
                          memberid:'',
                          surname:'',
                          addressline1:'',
                          country:'',
                          postcode:''
                        },
                searchresults :[]
        }
  },

  methods: {
            submitsearch: function(){
                    axios.post('/members/search/',
                               JSON.stringify(this.searchcriteria),
                        {
                          headers: {
                                      'Content-type': 'application/json',
                                      'Accept': 'application/json',
                                      'X-CSRF-TOKEN': document.querySelector('#csrftoken').getAttribute('content')
                                    }
                        }
                              )
                         .then(function (response) {
                                                    this.searchresults = response.data;
                                                    })
                         .catch(function (error) {
                                                  console.log(error);
                                                });
            }

          }

};