vue.js - laravel使用vue-resource,報錯Uncaught SyntaxError: Unexpected token

Question

依照vue-resource官方文檔，以及laravel官方文檔都顯示應該採用以下語法格式：

var demo = new Vue({
  el: '#app',
  data: {
    gridColumns: {'#':'id', '公司名':'name', '组织名':'email', '电话':'created_at'},
    gridData: []
  },
  methods: {
    this.$http.get('../db').then((response) => {
      this.gridData = response.data;
    },(response) => {
      console.log(response);
    });
  }
});

但是瀏覽器直接報錯誤：(index):51 Uncaught SyntaxError: Unexpected token .

#經過多方資料查找，以及調試，最終發現可以正常運作的語法如下：

var demo = new Vue({
  el: '#app',
  data() {
    return{
      gridColumns: {'#':'id', '公司名':'name', '组织名':'email', '电话':'created_at'},
      gridData: []
    }
  },
  mounted(){
    this.$http.get('../db').then((response) => {
      this.gridData = response.data;
    },(response) => {
      console.log(response)
    });
  }
});

我想問的是，具體是什麼原因導致的，以後的文法規則該遵循哪一種？

補充：

Answer 1

單純文法錯誤，你仔細看下第一個報錯的程式碼

  methods: {
    // 這裡是對象呀，不能直接塞
    this.$http.get('../db').then((response) => {
      this.gridData = response.data;
    },(response) => {
      console.log(response);
    });
  }

應該是

  methods: {
    fetchData() {
        this.$http.get('../db').then((response) => {
          this.gridData = response.data;
        },(response) => {
          console.log(response);
        });
    }
  },
  mounted() {
      this.fetchData()
  }

Answer 2

謝謝，Tomoe回覆我的問題！
data的寫法也知道為什麼了。根據vue文檔說明，在元件中不能用屬性方式定義data，必須使用物件方式定義。