title: Nested v-for loops in a vue-components
body: <p>I'm trying to use a vue.js component to display the following data (in a vue instance) as a table.<br>
  But I not sure how to access the data.  I tried nested v-for loops.</p>
  
  <h2><strong>OUTPUT TABLE</strong></h2>
  
  <p><strong>Equp Name  |    Service Time</strong><br>
  Mill Saw  |  2018-02-01 10:00:00<br>
  Mill Saw  |  2018-02-04 10:00:00 </p>
  
  <p><strong>Equp Name  |    Service Time</strong><br>
  Jack Hammer  |  2018-02-06 12:30:00</p>
  
  <p><strong>VUE COMPONENT</strong></p>
  
  <pre><code>    Vue.component('services', {
    props: ['value'],
    template: '&lt;div&gt;{{value.serviceTime}}&lt;/div&gt;' 
  })
  
  new Vue({ 
    el: '#mydemo1',
    data: {
        "results": {
              "4": [
                  {
                      "service": 4,
                      "serviceTime": "2018-02-01 10:00:00",
                      "usrname": "chris job",
                      "eqname": "mill saw",
                      "quantity": "3.00",
                      "rate": "20.00",
                      "total": "60.00",
                      "note": ""
                  },
                  {
                      "service": 4,
                      "serviceTime": "2018-02-04 10:00:00",
                      "usrname": "chris job",
                      "eqname": "mill saw",
                      "quantity": "3.00",
                      "rate": "20.00",
                      "total": "0.00",
                      "note": null
                  }
              ],
              "34": [
                  {
                      "service": 34,
                      "serviceTime": "2018-02-06 12:30:00",
                      "usrname": "chris job",
                      "eqname": "jack hammer",
                      "quantity": "0.00",
                      "rate": "20.00",
                      "total": "0.00",
                      "note": "Training"
                  }
              ]
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>div id="mydemo1"&gt;
    &lt;services v-for="invoice in results"
     v-for="items in invoice"
     v-for="details in items"
     v-bind:value="invoice"
     &gt;&lt;/services&gt;
  </code></pre>
  
  <p>Suggestions?</p>