How can I run functions within a Vue data object? : <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://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="noreferrer"><img src="https://i.stack.imgur.com/f41iM.png" alt="enter image description here"></a></p>
