如何在Nuxt.js SSR中查看api状态？

<template>
  <div>
    <div v-if="apiStatus === 'loading'">加载中...</div>
    <div v-else-if="apiStatus === 'success'">请求成功</div>
    <div v-else-if="apiStatus === 'error'">请求失败</div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      apiStatus: 'loading'
    };
  },
  async asyncData() {
    try {
      const response = await axios.get('https://api.example.com/data');
      // 请求成功，更新apiStatus的值为'success'
      this.apiStatus = 'success';
      return {
        data: response.data
      };
    } catch (error) {
      // 请求失败，更新apiStatus的值为'error'
      this.apiStatus = 'error';
      console.error(error);
    }
  }
};
</script>