title: Vue.js For loop is not rendering content
body: <p>I am building a web application using vue.js, vue-resource, vue-mdl and google material design lite.
  JS compilation is performed using webpack through laravel elixir.
  In this app I have to render a table row for each object from an array returned from a Rest API (Django Rest Framework). I have made the following code inside the html to render content using vue.js:</p>
  
  <pre><code>&lt;tr v-for="customer in customers"&gt;
      &lt;td class="mdl-data-table__cell--non-numeric"&gt;{{ customer.status }}&lt;/td&gt;
      &lt;td class="mdl-data-table__cell--non-numeric"&gt;{{ customer.name }}&lt;/td&gt;
      &lt;td class="mdl-data-table__cell--non-numeric"&gt;{{ customer.company }}&lt;/td&gt;
  &lt;tr&gt;
  </code></pre>
  
  <p>This should render all objects in the array as a table row. I have also tried to wrap the above in a template tag like this:</p>
  
  <pre><code>&lt;template v-for="customer in customers"&gt;
  &lt;tr&gt;
      &lt;td class="mdl-data-table__cell--non-numeric"&gt;{{ customer.status }}&lt;/td&gt;
      &lt;td class="mdl-data-table__cell--non-numeric"&gt;{{ customer.name }}&lt;/td&gt;
      &lt;td class="mdl-data-table__cell--non-numeric"&gt;{{ customer.company }}&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>This did not change either.
  I have also tried to hardcode the array inside the ready() function of the vue instance, but this did not help either.</p>
  
  <pre><code>window._ = require('lodash');
  require('material-design-lite');
  window.Vue = require('vue');
  require('vue-resource');
  var VueMdl = require('vue-mdl');
  Vue.use(VueMdl.default);
  const app = new Vue({
      el:'body',
      ready: function(){
          //this.getCustomerList();
          this.customers = [
              { name: "Peter", status: "true", company: "Company 1"},
              { name: "John", status: "false", company: "Company 2"}
          ]
  
      },
      data: {
          customers: [],
          response: null,
          messages: []
      },
      methods: {
          getCustomerList: function()
          {
              this.$http({url: '/api/customers/', method: 'GET'}).then(function(response){
                  //Success
                  this.customers = response.data
                  console.log(response.data)
              },
              function(response){
                  console.log(response)
              })
          }
      }
  })
  </code></pre>
  
  <p>Changing the above to this does not change either:</p>
  
  <pre><code>window._ = require('lodash');
  require('material-design-lite');
  window.Vue = require('vue');
  require('vue-resource');
  var VueMdl = require('vue-mdl');
  Vue.use(VueMdl.default);
  const app = new Vue({
      el:'body',
      ready: function(){
          //this.getCustomerList();
  
      },
      data: {
          customers: [
              { name: "Peter", status: "true", company: "Company 1"},
              { name: "John", status: "false", company: "Company 2"}
          ],
          response: null,
          messages: []
      },
      methods: {
          getCustomerList: function()
          {
              this.$http({url: '/api/customers/', method: 'GET'}).then(function(response){
                  //Success
                  this.customers = response.data
                  console.log(response.data)
              },
              function(response){
                  console.log(response)
              })
          }
      }
  })
  </code></pre>
  
  <p>I have also tried to just make a plain html table that does not have any of the Google MDL classes applied, and this does also not give any result.
  Logging <code>this.customers</code> to the console shows that it does in fact contain the data, but for reason it is not rendering. Why is that? What am I doing wrong?</p>