title: Vue js v-for not looping thru component property
body: <p>I have the following setup: </p>
  
  <p><strong>JS</strong></p>
  
  <pre><code>var session = {
      content : {
          products : {
              options : {
                  page : 1,
                  productsPerPage : 20,
                  orderBy : 'customPriority',
                  orderDirection : 'asc'
              },
              productList : [
                      {name: 'a'},
                      {name: 'b'},
                      {name: 'c'},
                      {name: 'd'},
              ]
          }
      }
  }
  
  
  Vue.component('product-list', {
      props: {
          options: { type: Object },
          products : { type: Array, required: true }
      }
  })
  
  var app = new Vue({
      el: '#app',
      data: session
  })
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;product-list
          :options="content.products.options"
          :products="content.products.productList"
      &gt;
      &lt;div
        v-for="product in products"
      &gt;
        &lt;h1&gt;
          {{product.name}}
        &lt;/h1&gt;
      &lt;/div&gt;
    &lt;/product-list&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(jsFiddle: <a href="https://jsfiddle.net/Lfw94bgz/1/" rel="nofollow">https://jsfiddle.net/Lfw94bgz/1/</a>)</p>
  
  <p>My problem is that the v-for directive seems to be not working, the products array is defined and shows up in vue-dev-tools, I've built <a href="https://vuejs.org/examples/grid-component.html" rel="nofollow">this example</a> seems to be doing the same (iterating thru an array passed to the compent via prop).</p>
  
  <p>No errors/warning in the console, I'm quite lost, thanks for your help</p>