Vue.jsループがコンテンツをレンダリングしていない

Question

私は、vue.js、vue-resource、vue-mdl、およびGoogleマテリアルデザインライトを使用してWebアプリケーションを構築しています。 JSコンパイルは、lackvel elixirからwebpackを使用して実行されます。 このアプリケーションでは、残りのAPI（Django Rest Framework）から返された配列から各オブジェクトのテーブル行をレンダリングする必要があります。私はvue.jsを使用してコンテンツをレンダリングするために、HTML内部次のコードを行った：

<tr v-for="customer in customers"> 
    <td class="mdl-data-table__cell--non-numeric">{{ customer.status }}</td> 
    <td class="mdl-data-table__cell--non-numeric">{{ customer.name }}</td> 
    <td class="mdl-data-table__cell--non-numeric">{{ customer.company }}</td> 
<tr> 

これは、テーブルの行として配列内のすべてのオブジェクトをレンダリングするべきです。私はまたこのようなテンプレートのタグで上記をラップしようとしました：

<template v-for="customer in customers"> 
<tr> 
    <td class="mdl-data-table__cell--non-numeric">{{ customer.status }}</td> 
    <td class="mdl-data-table__cell--non-numeric">{{ customer.name }}</td> 
    <td class="mdl-data-table__cell--non-numeric">{{ customer.company }}</td> 
</tr> 
</template> 

これも変更されませんでした。 私はまた、vueインスタンスのready（）関数の中で配列をハードコードしようとしましたが、これは役に立たなかったです。

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) 
      }) 
     } 
    } 
}) 

これに上記の変更のいずれか変更されません：

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) 
      }) 
     } 
    } 
}) 

私もちょうどGoogleのMDLクラスのいずれかが適用されていないプレーンなHTMLテーブルを作成しようとしましたが、これはありませんどんな結果も与えない。 コンソールにthis.customersを記録すると、実際にデータが含まれていることが示されますが、レンダリングされていないためです。何故ですか？私は間違って何をしていますか？