title: Vue <script setup> Top level await causing template not to render
body: <p>I'm using the new  syntax in Vue 3 and I really like the idea of it, but once I tried to use a top level await I started to run in some problems.</p>
  <p>This is my code:</p>
  <pre><code>&lt;template&gt;
    &lt;div class=&quot;inventory&quot;&gt;
      &lt;a class=&quot;btn btn-primary&quot;&gt;Test button&lt;/a&gt;
        &lt;table class=&quot;table&quot;&gt;
          &lt;thead&gt;
            &lt;tr&gt;Name&lt;/tr&gt;
            &lt;tr&gt;Description&lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody&gt;
            &lt;tr v-for=&quot;(item, key) in inventory&quot; :key=&quot;key&quot;&gt;
              &lt;td&gt;{{ item.name }}&lt;/td&gt;
              &lt;td&gt;{{ item.description }}&lt;/td&gt;
            &lt;/tr&gt;
          &lt;/tbody&gt;
        &lt;/table&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script setup lang=&quot;ts&quot;&gt;
  import { apiGetInventory, GetInventoryResponse } from '@/module/inventory/common/api/getInventory'
  
  const inventory: GetInventoryResponse = await apiGetInventory()
  &lt;/script&gt;
  </code></pre>
  <p>As you can see it's not that complicated, the apiGetInventory is just an axios call so I won't bother going into that.
  The problem is, that if I have this top level await, my template doesn't render anymore, it's just a blank page in my browser. If I remove the two lines of code, it works fine.
  Also the promise seems to revolve just fine, if I place a
  console.log(inventory) underneath it I get an array with objects all fine and dandy.</p>
  <p>Anyone have a clue what's going wrong here?</p>