Rails 4 + Vue：组件不显示

Question

我有一个简单的观点：

<div id="purchases">
  <table>
    <thead>
      <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Manager</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="purchase in purchases">
        <td>{{ purchase.created_at }}</td>
        <td>{{ purchase.weeks }}</td>
        <td>{{ purchase.weekly_cost }}</td>
      </tr>
    </tbody>
  </table>
</div>

和一个简单的vue组件在它自己的js文件中：

$(document).ready(function() {
  var purchases = new Vue({
    el: '#purchases',
    data: {
      purchases: []
    },
    ready: function() {
      var that;
      that = this;
      $.ajax({
        url: '/purchases.json',
        success: function(res) {
          console.log(res)
          that.purchases = res;
        }
      });
    }
  });
});

...但是视图中没有加载数据，当我查看devtools中的网络选项卡时，从未进行过ajax调用。 为什么会发生这种情况？