vue.js - laravel uses vue-resource and reports an error Uncaught SyntaxError: Unexpected token

Question

According to the vue-resource official documentation and laravel official documentation, the following syntax format should be used:

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

But the browser directly reports an error: (index):51 Uncaught SyntaxError: Unexpected token .

After searching various information and debugging, we finally found that the syntax that can run normally is as follows:

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

What I want to ask is, what is the specific reason? Which grammatical rules should be followed in the future?

Replenish:

Answer 1

Simple syntax error, please look carefully at the first error code

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

should be

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

Answer 2

Thank you, Tomoe for replying to my question!
I also know why the way data is written. According to the Vue documentation, data cannot be defined in a component using attributes, but must be defined using objects.