component.js

Vue.component('status', {
  template: `
  <h2>Services Status</h2>
  <ul>
    <li class="{{status.edumate.production}}">Edumate (Production): {{status.edumate.production}}</li>
    <li class="{{status.edumate.test}}">Edumate (Test): {{status.edumate.test}}</li>
  </ul>
  <ul>
    <li class="{{status.exchange.production}}">Exchange (Production): {{status.exchange.production}}</li>
    <li class="{{status.exchange.test}}">Exchange (Test): {{status.exchange.test}}</li>
    <li class="{{status.exchange.beta}}">Exchange (Beta): {{status.exchange.beta}}</li>
  </ul>
  <button v-on:click="fetchStatusMixin">Update Statuses</button>
  `,
  mixins: [fetchStatusMixin],
  data: function () {
    return {
      status: {
        edumate: {
          production: 'unknown',
          test: 'unknown'
        },
        exchange: {
          production: 'unknown',
          test: 'unknown',
          beta: 'unknown'
        }
      }
    };
  }
});