title: Composition API - Axios request in setup()
body: <p>I am experimenting with Vue3's Composition API in a Laravel/VueJS/InertiaJS stack.</p>
  <p>A practice that I have used a lot in Vue2 with this stack is to have 1 route that returns the Vue page component (eg. Invoices.vue) and then in the <code>created()</code> callback, I would trigger an axios call to an additional endpoint to fetch the actual data.</p>
  <p>I am now trying to replicate a similar approach in Vue3 with composition API like so</p>
  <pre><code>export default {
      components: {Loader, PageBase},
      props: {
          fetch_url: {
              required: true,
              type: String,
          }
      },
      setup(props) {
          const loading = ref(false)
          const state = reactive({
              invoices: getInvoices(),
              selectedInvoices: [],
          });
  
          async function getInvoices() {
              loading.value = true;
              return await axios.get(props.fetch_url).then(response =&gt; {
                  return response.data.data;
              }).finally(() =&gt; {
                  loading.value = false;
              })
          }
  
          function handleSelectionChange(selection) {
              state.selectedInvoices = selection;
          }
  
          return {
              loading,
              state,
              handleSelectionChange,
          }
      }
  }
  </code></pre>
  <p>This however keeps on giving me the propise, rather than the actual data that is returned.</p>
  <p>Changing it like so does work:</p>
  <pre><code>export default {
      components: {Loader, PageBase},
      props: {
          fetch_url: {
              required: true,
              type: String,
          }
      },
      setup(props) {
          const loading = ref(false)
          const state = reactive({
              invoices: [],
              selectedInvoices: [],
          });
  
          axios.get(props.fetch_url).then(response =&gt; {
              state.invoices = response.data.data;
          }).finally(() =&gt; {
              loading.value = false;
          })
  
          function handleSelectionChange(selection) {
              state.selectedInvoices = selection;
          }
  
          return {
              loading,
              state,
              handleSelectionChange,
          }
      }
  }
  </code></pre>
  <p>I want to use function though, so I can re-use it for filtering etc.</p>
  <p>Very curious to read how others are doing this.
  I have been googling about it a bit, but cant seem to find relevant docu.</p>
  <p>All feedback is highly welcomed.</p>