title: Vue computed property returning a promise?
body: <p>I have a computed property that triggers an API call and returns the data:</p>
  
  <pre><code>async ingredients() {
      const url = "/api/ingredients";
  
      const request = new Request(url, {
        method: "GET",
        credentials: "same-origin"
      });
  
      const response = await fetch(request);
      const json = await response.json();
      //debugger;
      return json;
  }
  </code></pre>
  
  <p>The debugger I have in there catches when the page is loading and has all the data that I expect to see (variable <code>json</code> is an array with my items inside it).</p>
  
  <p>But when I look at the Vue component in the Vue Dev tools, it just says:</p>
  
  <p><code>ingredients:Promise</code></p>
  
  <p>I use this same structure at work all the time, but I can't figure out what's different about this. If I hit the API route in my browser, I see the expected JSON.</p>
  
  <p>I'm iterating over it like:</p>
  
  <p><code>&lt;tr v-for="(ingredient, index) in ingredients" :key="index"&gt;</code></p>
  
  <p>But as <code>ingredients</code> here just refers to a Promise, the table isn't rendered.</p>
  
  <p>I'm not sure it matters but I'm using a Vue/Laravel mix. The Laravel side is working completely fine, the API call comes back in the URL I expect.</p>