#JAVASCRIPT:
showEvents: function(leadId) {
    var $row = $('#events-' + leadId);
    if ($row.is(':visible')) {
      $row.fadeOut();
      return;
    }
    $.get('/api/v1/leads/' + leadId + '.json').success(function(response){
      var events = response.events.map(function(event){
        return '<div class="row"><div class="col-md-2">' + event.name + '</div><div class="col-md-4">' + this.moment(event.created_at).format('dddd MMM Do YYYY, h:mm a') + '</div></div>';
      });
      $row.empty();
      if (events.length){
        $row.append('<td colspan="7">' + events.join('') + '</td>');
      } else {
        $row.append('<td colspan="7"><span>No Event History</span></td>');
      }
      $row.fadeIn();
    })
  }
}

#HTML:
<tbody>
  <template v-for="lead in leads">
    <tr v-on:click="showEvents(lead.id)" :key="lead.id">
      <td>{{ moment(lead.created_at).format('dddd MMM Do YYYY, h:mm a') }}</td>
      <td>{{ lead.first_name }}</td>
      <td>{{ lead.last_name }}</td>
      <td><a v-bind:href="'/leads/' + lead.id + '/edit'">{{ lead.email }}</a></td>
      <td>{{ lead.phone }}</td>
      <td>{{ moment(lead.appointment_date).format('dddd MMM Do YYYY, h:mm a') }}</td>
      <td>{{ lead.notes }}</td>
    </tr>
    <tr v-bind:id="'events-' + lead.id" style="background-color:lightgrey;" class="collapse">
    </tr>
  </template>
</tbody>