title: vue-good-table choose a certain row out of your data to be displayed
body: <p>So I'm using vue-good-table: <a href="https://github.com/xaksis/vue-good-table" rel="nofollow noreferrer">https://github.com/xaksis/vue-good-table</a> and I am wanting to create multiple tables when I receive data back from an ajax call.  The call is through the facebook API and takes roughly 20 seconds for data to be returned and pushed into the tableModel array.  I'm doing v-for statement to create collapsable boxes and I want each collapsable item to only show data related to that specific campaign.  Here is my for loop:</p>
  
  <pre><code>        &lt;div v-for="(campaigns, index) in allCampaigns"&gt;
          &lt;collapse :multiple-active="false"&gt;
              &lt;collapse-item :title="campaigns.campaign_name"&gt;
              &lt;div&gt;
                  &lt;vue-good-table
                  :columns="columns"
                  :rows="tableData[index]"
                  styleClass="vgt-table striped bordered"/&gt;
              &lt;/div&gt;
              &lt;/collapse-item&gt;
          &lt;/collapse&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>I was hoping to show just the tableData related to the index of the collapse component that is created.  I was hoping that when tableData updates (returned data gets pushed into the array), it would automatically update the table.  I get the following error in the console:
  [Vue warn]: Error in callback for watcher "rows": "TypeError: Cannot create property 'vgt_id' on string
  TypeError: Cannot create property 'vgt_id' on string
  Here is how I am pushing data into the tableModel: </p>
  
  <pre><code>      fillTableData(campaigns)  {
      //   console.log(campaigns);
        for(let i = 0; i &lt; campaigns.length; i++) {
            this.grabClientFacebook(campaigns[i], i);
        }
    },
    grabClientFacebook(campaign, id) {
      //   console.log(campaign);
        this.axios.post("/auth/client/facebookcall",
              {'campaign': campaign.id, 'datepreset': this.datepreset}).then((response) =&gt; {
                  console.log(response.data);
                  let fbcampaign = response.data;
                  console.log(fbcampaign);
                  this.tableData.push({'index': id,
                                       'campaignname': fbcampaign[9],
                                       'results': fbcampaign[0], 
                                       'reach': fbcampaign[1], 
                                       'impressions': fbcampaign[2], 
                                       'cpl': fbcampaign[3], 
                                       'spent': fbcampaign[4], 
                                       'ctr': fbcampaign[5], 
                                       'cpc': fbcampaign[6], 
                                       'clicks': fbcampaign[7]});
                  console.log('---------------------');
                  console.log(this.tableData);
              }).catch(error =&gt; {console.log(error);
          });
    }
  </code></pre>
  
  <p>tableData is delcared  as tableData: []</p>