title: Vue JS v-for not iterating over array
body: <p>Hi guys I am using Vue JS to try and loop through my data. Here is my whole JS file:</p>
  
  <pre><code>var contentful = require('contentful');
  
  var client = contentful.createClient({
    space: 'HIDDEN',
    accessToken: 'HIDDEN'
  });
  
  Vue.component('careers', {
    template: '&lt;div&gt;&lt;div v-for="career in careerData"&gt;{{ fields.jobDescription }}&lt;/div&gt;&lt;/div&gt;',
  
    data: function() {
      return {
       careerData: []
      }
    },
  
    created: function() {
     this.fetchData();
    },
  
    methods: {
     fetchData: function() {
       client.getEntries()
       .then(function (entries) {
         // log the title for all the entries that have it
         entries.items.forEach(function (entry) {
           if(entry.fields.jobTitle) {
             this.careerData = entries.items;
           }
         })
       });
     }
    }
  });
  
  var app = new Vue({
    el: '#app'
  });
  </code></pre>
  
  <p>I am using methods to access some data from Contentful, once it has grabbed the necessary data it is sent to my data object.</p>
  
  <p>If I <code>console.log(careerData);</code> within my console the following data is returned:</p>
  
  <p><a href="https://i.stack.imgur.com/hikZp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/hikZp.png" alt="enter image description here"></a></p>
  
  <p>So I'd expect if I used <code>v-for</code> within my template and tried iterating over <code>careerData</code> it would render correctly however on my front-end I am left with an empty div like so:</p>
  
  <pre><code>&lt;div id="app"&gt;&lt;div&gt;&lt;/div&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I am currently pulling my component into my HTML like so:</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;careers&gt;&lt;/careers&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>No errors are displayed within my console, can you think of any reason this might be happening?</p>
  
  <p>Thanks, Nick</p>