title: vue js ajax call cannot read property 'push' of undefined
body: <p>I am having problems with vue.js when it comes to pushing data from the database to the webpage. I am using laravel 5.3 which converts data to Jason. the code posts to the server the number of records to be fetched then the server response with the data in which i want to display on the webpage. here is Vue js Code</p>
  
  <pre><code>new Vue({
          el: "#projects",
          data: {
  
              count: 0,
              fetched_projects: []
  }
  
   methods:{
         checkproject: function(){
              var fetch = this.count += 4;               
  
             axios.post('/loadmore', {fetch: fetch })
                 .then(function(response) {
  
                    this.fetched_projects.push(response.data);
  
                 })
                 .catch(function(error){
                     console.log(error);
                 });
  
         }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code> &lt;div class="row"&gt;
      &lt;div class="col-md-3"&gt;
          &lt;ul v-for="more_projects in fetched_projects"&gt;
              &lt;li&gt;@{{ more_projects }}&lt;/li&gt;
  
          &lt;/ul&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Laravel controller</p>
  
  <pre><code> public function setloadMore(Request $request){
  
    $new_projects = $request-&gt;fetch;
  
    $results = Model1::with('relation')-&gt;take($new_projects)-&gt;get();
  
    return $results;
  
  
  }
  </code></pre>
  
  <p>The problem is on <code>this.fetched_projects.push(response.data);</code> its giving me "cannot read property 'push' of undifined"</p>