title: How can I run functions within a Vue data object?
body: <p>So I am trying to use the following component within Vue JS:</p>
  <pre><code>Vue.component('careers', {
    template: '&lt;div&gt;A custom component!&lt;/div&gt;',
  
    data: function() {
  
      var careerData = [];
  
      client.getEntries()
      .then(function (entries) {
        // log the title for all the entries that have it
        entries.items.forEach(function (entry) {
          if(entry.fields.jobTitle) {
            careerData.push(entry);
          }
        })
      });
  
      return careerData;
    }
  });
  </code></pre>
  <p>The following code emits an error like so:</p>
  <pre><code>[Vue warn]: data functions should return an object:
  https://v2.vuejs.org/v2/guide/components.html#data-Must-Be-a-Function 
  (found in component &lt;careers&gt;)
  </code></pre>
  <p>However as you can see I am running a foreach through all of my Contentful <code>entries</code>, then each object within entries is being pushed to an array, I then try to return the array but I get an error.</p>
  <p>Any idea how I can extract all of my <code>entries</code> to my data object within my component?</p>
  <p>When I use the <code>client.getEntries()</code> function outside of my Vue component I get the following data:</p>
  <p><a href="https://i.stack.imgur.com/f41iM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f41iM.png" alt="enter image description here" /></a></p>