Results Query Vue Applet

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="results">
	<h3>Display results here from VUE</h3>
  <!-- Angel, work in here -->
</div>


<script>
// QUICK GOOGLE SPREADSHEET QUERY
// USES CUSTOM SPREADSHEET API FROM RHESUS.IO
const tab = 'GranFondo 2009-2017' // the tab with EVERYTHING until 2017
const cols = 'bib,route,firstname,lastname,agebracket,elapsedtime,year'
const limit = 4000
const sheetKey = '1j6hZ1g7_xdrHGxVQZL1N0VUulAn5XMWCI7CnT--Jrnk'
const sheetFeed = `https://app.rhesus.io/client/googlesheet?sheetKey=${sheetKey}&limit=${limit}&offset=0&cols=${cols}&worksheet=${tab}`

let results = new Vue({
	el: '#results',
  data: {
  	results: [],
    spin: true //if we can integrate a spinner while it initially loads, great.
  },
  mounted: function(){
  	let $this = this
    
    // Using axios to get the feed data from 2009-2017 is a little slow at first, but once it's loaded
    // a fancy table object should make sorting and sifting data fast.
    axios.get(sheetFeed).then(function (response) {
      console.log('Results',response.data)
      $this.results = response.data
      $this.spin = false
    })
	}
})
</script>