Error: Layout must be an array!

I’m getting the error Error: Layout must be an array! when I try to incorporate the library into my application. I added the code here:

`<script>
  import SystemInformation from './LandingPage/SystemInformation'

  import VueGridLayout from 'vue-grid-layout'; 

  var GridLayout = VueGridLayout.GridLayout; 
  var GridItem = VueGridLayout.GridItem; 

  var testLayout = [
    {"x":0,"y":0,"w":2,"h":2,"i":"0"},
    {"x":2,"y":0,"w":2,"h":4,"i":"1"},
    {"x":4,"y":0,"w":2,"h":5,"i":"2"},
    {"x":6,"y":0,"w":2,"h":3,"i":"3"},
    {"x":8,"y":0,"w":2,"h":3,"i":"4"},
    {"x":10,"y":0,"w":2,"h":3,"i":"5"},
    {"x":0,"y":5,"w":2,"h":5,"i":"6"},
    {"x":2,"y":5,"w":2,"h":5,"i":"7"},
    {"x":4,"y":5,"w":2,"h":5,"i":"8"},
    {"x":6,"y":4,"w":2,"h":4,"i":"9"},
    {"x":8,"y":4,"w":2,"h":4,"i":"10"},
    {"x":10,"y":4,"w":2,"h":4,"i":"11"},
    {"x":0,"y":10,"w":2,"h":5,"i":"12"},
    {"x":2,"y":10,"w":2,"h":5,"i":"13"},
    {"x":4,"y":8,"w":2,"h":4,"i":"14"},
    {"x":6,"y":8,"w":2,"h":4,"i":"15"},
    {"x":8,"y":10,"w":2,"h":5,"i":"16"},
    {"x":10,"y":4,"w":2,"h":2,"i":"17"},
    {"x":0,"y":9,"w":2,"h":3,"i":"18"},
    {"x":2,"y":6,"w":2,"h":2,"i":"19"}
];



  export default {
  name: 'landing-page',
  data: {
    layout: testLayout
  }, 
  components: { SystemInformation, GridItem, GridLayout  },

methods: {
  open (link) {
    this.$electron.shell.openExternal(link)
  }
},
}
</script>`

Why is it giving out 😕?

[SmiffyKMc]

Hey gmsa, I found out what the issue was. My data function was returning wrong. I needed to do this…

data () {
    return {
        layout: testLayout
    }
}

Thanks very much though for your fast response!

[ikbelkirasan]

@TomFranssen When you create a new regular Vue instance using new Vue(...) then the data property needs to be an object. Otherwise, when the Vue instance is a Vue Component, then data should be a function.