Can't access to $fetchState

[LynxTR]

Only $fetchState.error accessible at async fetch(){}

Simplest example is:

<script>
  export default {
    data: () => ({
      data: null,
    }),

    async fetch() {
      this.data = await this.$axios.$get('/api/v1/categories')
    },
  }
</script>

<template>
  <main>
    <content-placeholders
      v-if="$fetchState.pending || $fetchState.error"
    >
     <content-placeholders-img />
    </content-placeholders>
    <!--  -->
    <!--  -->
    <!--  -->
    <pre v-else>
      {{ data }}
    </pre>
  </main>
</template>

Is there anyway to fix this problem? Cause async fetch provides a lot of help by managing component level fetches and seems like it's status response is undefined:

If it's not possible to fix this problem, is there a way to pull off nginx proxy /api- that way, i can work around with @nuxt/proxy and reach to laravel.

[xalaida]

@LynxTR I use $fetch a lot and did not face this problem at all. I do not think it is related to the docker.

Does the API call work if you put it into the mounted() hook?