title: Using computed and composables in vue 3.2 with the setup script tag
body: <p>I'm currently trying out some of the latest vue version and features (3.2).</p>
  <p>I've created a useFetch composable to reuse some logic (it's based on the vue <a href="https://staging.vuejs.org/guide/reusability/composables.html#async-state-example" rel="nofollow noreferrer">documentation</a>)</p>
  <p><strong>useFetch.js</strong></p>
  <pre class="lang-js prettyprint-override"><code>import { ref } from 'vue'
  import axios from 'axios';
  
  const apiClient = axios.create({
      baseURL: process.env.VUE_APP_API_ENDPOINT,
      withCredentials: false,
      headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
      },
      timeout: 10000,
  });
  
  export function useFetch(url) {
      const data = ref(null);
      const error = ref(null);
      const isLoading = ref(true);
  
      apiClient({ method, url, data: body })
          .then((response) =&gt; (data.value = response.data))
          .catch((err) =&gt; (error.value = err))
          .finally(() =&gt; isLoading.value = false)
  
    return { data, error }
  }
  </code></pre>
  <p>I'm using the useFetch composable in a component to fetch companies from the backend. The data I'm getting back is rough so I want to reformat it using a computed (That was the way I did it when using vue 2)</p>
  <p><strong>CompanyList.vue</strong></p>
  <pre class="lang-html prettyprint-override"><code>&lt;script setup&gt;
      import { computed } from 'vue';
      import useFetch from '@/composables/useFetch';
      import { formatEmail, formatPhone, formatEnterpriseNumber } from '@/utils/formatters';
  
      const { data, isLoading, error } = useFetch('get', '/companies');
  
      const companies = computed(() =&gt;
          data.companies?.map((company) =&gt; ({
              id: `#${company.id}`,
              name: `${company.legal_entity_type} ${company.business_name}`,
              enterprise_number: formatEnterpriseNumber(company.enterprise_number),
              email: formatEmail(company.email),
              phone: formatPhone(company.phone),
          }))
      );
  &lt;/script&gt;
  
  &lt;template&gt;
      &lt;div v-if=&quot;isLoading&quot;&gt;Loading...&lt;/div&gt;
      &lt;div v-else-if=&quot;error&quot;&gt;Oops! Error encountered: {{ error }}&lt;/div&gt;
      &lt;div v-else-if=&quot;companies&quot;&gt;
          Companies:
          &lt;pre&gt;{{ companies }}&lt;/pre&gt;
      &lt;/div&gt;
      &lt;div v-else&gt;No data :(&lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  <p>When using <code>Companies</code> inside the template tags it stays <code>null</code>. I've checked and <code>data</code> has a companies property of the type Array with data in it.</p>
  <p>Anyone an idea how to handle this?</p>