title: [Vue warn]: Error in created hook: "TypeError: Cannot set property of undefined"
body: <p>I am creating a VueJS application. I have a child component, Child.vue to which data is passed from a parent.</p>
  
  <p><strong>Child.vue</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export default{
  
      props:['info'],
  
      data: function(){
          return{
              timeValue:{
                  minutes: '',
                  hours: ''
              }
          }
      },
      created: function(){
          
          console.log("Printing inside created of Child ",this.info);
          this.convertMins(this.info[0][2]);
          
      },
  
      methods:{
          convertMins: (minutes) =&gt; {
              console.log("Printing inside convert mins", this);
              if(minutes===0){
                  this.timeValue.minutes = 0;
                  this.timeValue.hours = 0;
              }
              if(minutes===60){
                  this.timeValue.hours = 1;
                  this.timeValue.minutes = 0;
              }
              if(minutes&gt;60){
                  this.timeValue.hours = Math.floor(minutes/60);
                  this.timeValue.minutes = minutes % 60;
              }
          }
      }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>And my parent component looks like this,</p>
  
  <p><strong>Parent.vue</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import Child from './Child.vue';
  
  export default {
  data(){
   return{
          info:[ ],
  
          errors: []
   }
  },
  
  created: function(){
  
    this.accessInformation();
  },
  
  methods: {
      
      accessInformation: function(){
      axios.get(localhost:3000/retrieveInfo)
      .then(response =&gt;{
      console.log(response.data.rows[3]);
      this.info.push(response.data.rows[3]);
     })
     .catch(e =&gt; {
              this.errors.push(e);
     })
   }
  },
  
  components: {        
      'child': Child,
      
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;template&gt;
   &lt;div&gt;
     &lt;child v-bind:info="info" v-if="info.length &gt; 0"&gt;&lt;/child&gt;
   &lt;/div&gt;
  &lt;/template&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I try running the application, I get an error like this,</p>
  
  <p><a href="https://i.stack.imgur.com/7mnyk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7mnyk.png" alt="Error"></a></p>
  
  <p><a href="https://i.stack.imgur.com/JrNON.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JrNON.png" alt="enter image description here"></a></p>
  
  <p>Why I am getting this error? I am new to VueJS. Can someone please help me out here?</p>