transit-board/src/App.vue

<template>
 <div id="app">
  <section>
   <h1>Transit Board</h1>
   <p>
    {{ now.getHours() }}:{{ now.getMinutes() }}:{{ now.getSeconds() }}
   </p>
  </section>
  <section>
   <button v-on:click="test">Test</button>
   <h2>🚌 45</h2>
   <ul>
     <li v-for="arrival in bus" v-bind:key="arrival.trip">
        {{ arrival.Direction }}, {{ arrival.late }} minutes late
     </li>
   </ul>
  </section>
 </div>
</template>

<script>

export default {
  name: 'app',
  data: function () {
    return {
      now: new Date(),
      bus: []
    }
  },
  methods: {
    test: function () {
      this.$http.get('/test_45_0.json').then(response => {
        this.bus = response.body.bus
      })
    }
  },
  created () {
      setInterval(() => {
        this.now = new Date()
      }, 1000)
  }
}
</script>

<style>
</style>