title: Vue: Error in created hook: "TypeError: Cannot convert undefined or null to object"
body: <p>So when I try to run my parent component 'Dashboard' in my browser. The child component 'ChartUsage' throws an error in my console: <code>[Vue warn]: Error in created hook: "TypeError: Cannot convert undefined or null to object"</code> When I try to debug I see that the prop: userSubmitsProp, just return an empty array. So that's also strange. But I can't figure out why. Can anyone help me out? </p>
  
  <p>Parent component that send the prop: userSubmitsProp:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="dashboard"&gt;
      &lt;cards :userDataProp="currentUserData"/&gt;
      &lt;chartusage :userSubmitsProp="previousSubmits" /&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import db from '@/firebase/init'
  import firebase from 'firebase'
  import moment from 'moment'
  import Chartusage from '@/components/dashboard/ChartUsage'
  import Cards from '@/components/dashboard/Cards'
  
  export default {
    name: 'Dashboard',
    components: {
      Chartusage,
      Cards
    },
    data () {
      return {
        currentUserData: {},
        previousSubmits: []
      }
    },
    created () {
      let user = firebase.auth().currentUser
  
      // find the user record
      db.collection('users').where('user_id', '==', user.uid).get()
        .then(snapshot =&gt; {
          snapshot.forEach((doc) =&gt; {
            let userData = doc.data()
            userData.timestamp = moment(doc.data().timestamp).format('lll')
            this.currentUserData = userData
          })
        })
        .then(() =&gt; {
          // fetch the user previous submits from the firestore
          db.collection('submits').where('user', '==', this.currentUserData.alias).get()
            .then(snapshot =&gt; {
              snapshot.forEach(doc =&gt; {
                let submit = doc.data()
                submit.id = doc.id
                submit.timestamp = moment(doc.data().timestamp).format('lll')
                this.previousSubmits.push(submit)
  
                // sort previousSubmits array by date
                this.previousSubmits.sort((a, b) =&gt; {
                  a = new Date(a.timestamp)
                  b = new Date(b.timestamp)
                  return b - a
                })
                console.log(this.previousSubmits)
              })
            })
        })
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  &lt;/style&gt;
  </code></pre>
  
  <p>Child component that receives the userSubmitsProp prop to make a chart with it:</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="check-usage"&gt;
      &lt;div class="row"&gt;
        &lt;div class="col s12"&gt;
          &lt;div class="chart"&gt;
            &lt;chartjs-line
              :fill="true"
              :datalabel="'My household usage'"
              :labels="labels"
              :data="dataset"
              :bordercolor="'#1976D2'"
              :backgroundcolor="'rgba(25,118,210, 0.5)'"
              :pointborderwidth="mywidth"
              :pointbordercolor="mypointbordercolor"
              :pointhoverborderwidth="hoverwidth"
              :pointhoverbackgroundcolor="hoverbackgroundcolor"
              :pointhoverbordercolor="hoverbordercolor"
              :bind="true"&gt;
            &lt;/chartjs-line&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'Chartusage',
    props: {
      userSubmitsProp: {
        type: Array,
        required: true
      }
    },
    data () {
      return {
        submits: this.userSubmitsProp,
        // chart data
        labels: [],
        dataset: [],
        // hover point
        mywidth: 3,
        mypointbordercolor: '#1976D2',
        hoverwidth: 3,
        hoverbackgroundcolor: '#636b6f',
        hoverbordercolor: '#ffd663'
      }
    },
    methods: {
      addChartLabels () {
        debugger
        for (let submit of Object.values(this.submits)) {
          this.labels.push(submit.timestamp)
        }
      },
      addChartdataset () {
        for (let submit of Object.values(this.usersubmits)) {
          this.dataset.push(submit.usage)
        }
      }
    },
    created () {
      this.addChartLabels()
      this.addChartdataset()
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  .check-usage {
    margin: 20px 20px 30px 20px;
    box-shadow: 0 4px 70px -18px #707070;
    padding: 10px;
  }
  
  .chart {
    padding: 10px;
  }
  &lt;/style&gt;
  </code></pre>