title: How to create multiple Vue components inside of Bootstrap tabs?
body: <p>I am using the <a href="http://getbootstrap.com/javascript/#tabs" rel="nofollow noreferrer">togglable tabs</a> component in Bootstrap. I would like a table in each tab. Each one is displaying a table of email logs (Click Event, Open Event, etc). I would also like each table to be loaded dynamically with Vue-resource only once the user clicks on that tab, and for the resource/component to only be loaded once (once we have the data from AJAX, don't refresh it).</p>
  
  <p>How can I set this up? I currently have an <code>email-table</code> component and an <code>email-table-template</code> template that renders the table, but I'm not sure how to set those up to render themselves when the user clicks the tab, and to only call the AJAX once.</p>
  
  <p><a href="https://i.stack.imgur.com/EXQSp.gif" rel="nofollow noreferrer">An illustration of the task</a></p>
  
  <p>Here is my current code for detecting the tab switch and newing up a Vue component:</p>
  
  <pre><code>$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var email_event = $(e.target).data('email-event');
  switch(email_event) {
    case 'click':
      createClick();
      break;
    // rest of the cases
  }
  
  function createClick() {
  var click_events = Vue.resource('/api/email_logs/click_events');
  
  click_events.get().then((response) =&gt; {
    new Vue({
      el: '#table-click',
      data: {
        searchQuery: '',
        gridColumns: ['campaign_id', 'target_link_name', 'target_link_url', 'created_at'],
        gridData: response.body
      }
    })
  });
  </code></pre>
  
  <p>Any insight is appreciated. Thanks very much!</p>