async/await axios を使ってAPIを叩くがResponseがない

困っていること

Nuxt.jsを使い、APIを叩く処理を書いているのですが、返り値を受け取ることができません。
<template>にボタンを配置し、 @click="onGetUser()"で処理を走らせています。
ChromeのDevToolのネットワークの欄を見るとAPIが叩かれていることが確認できました。
しかし、statusはpendingのままで、コードが返ってきません。しばらく放置していると、 ERR_ADDRESS_UNREACHABLE とコンソールに表示されます。
APIサーバを確認したところ、リクエストが来ていないことから、外に出られていないのでは？と推測しています。

vue
1<script>
2import axios from 'axios'
3export default {
4  data () {
5    return {
6      results: [],
7    }
8  },
9  methods: {
10    // <template>で、ボタンを配置し、`@click`で呼び出しをしている
11    async onGetUser() {
12      const response = await this.$axios.$get('api/sale_data/', {
13        params: {
14          key: 'value'
15        }
16      })
17      .catch(err => {})
18      this.results = response.data
19    }
20  }
21}
22</script>

asyncDataを使えば、Responseがある

asyncDataを使ってapiを叩けば正常に値が返ってくることや、直接curlを通してAPIを叩けば、サーバ側からのResponseはあるので、サーバ側の問題ではないと判断しています。

vue
1  asyncData ({}) {
2    return axios.get('api/sale_data/', {
3      params: {
4        key: 'value'
5      }
6    })
7    .then(response => {
8      return { results: response.data }
9    })
10    .catch(e => {
11      console.log(e)
12    })
13  }
14}