title: Vue 3 setup reactive fetch with async json
body: <p>I've installed Vue 3 and want to populate a reactive object with fetch from a JSON API.</p>
  <p>My component looks like below. I don't get any errors but I don't get any results either.</p>
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
    &lt;div&gt;
      {{ state.test.total }}
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import { reactive } from &quot;vue&quot;;
  
  export default {
    setup() {
      const state = reactive({
        test: null,
      });
  
      state.test = async () =&gt; {
        return await fetch(&quot;https://api.npms.io/v2/search?q=vue&quot;);
      };
  
      return {
        state,
      };
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>I expected to get a number on the screen because that's what's in <code>total</code> in the JSON file.</p>
  <h2>On <code>state.test</code></h2>
  <p>If I only output <code>state.test</code> I get the output below.</p>
  <blockquote>
  <p>function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, &quot;next&quot;, value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, &quot;throw&quot;, err); } _next(undefined); }); }</p>
  </blockquote>
  <p>Any idea how I can get around it?</p>