Vue.jsのmethods内にて複数のawaitを実行すると、一つ目のawaitを実行した時点で処理が終わってしまう。

発生している問題

クリックイベントで発火してAPIを二つ順番に投げる処理を書きたいのですが、以下のように実装したところ、一つ目のAPIを実行した時点で処理が終わってしまい、二つ目の API が実行されません。

async/await を利用し、順次 axios で API が実行されると期待したのですが、下記の処理では firstAPI が実行された後の処理が動きませんでした。

コンソールにも"1:firstAPI実行"だけが出力されていました。

やりたいこととしては一つ目の API でサーバー側のデータを更新し、二つ目の API で状態を取得して data を更新し、描画に反映させたいと考えております。

Vue 初心者なのですが何か間違った実装なのでしょうか・・・。

---

該当のソースコード

<template>
    <el-button　v-if="scope.row.status" @click="callAPI()" type="danger" round>連携を取り消す</el-button>
</template>

<script>
import axios from "axios";
export default {
    name: "Dashboard",
    data: () => {
        return {
          data: [],
          error: ""
        };
    },
    methods:{
        async callAPI(){
            try {
                // firstAPI
                console.log('1:firstAPI実行')
                await axios.delete("http://localhost:3000/api/first);
                console.log('2:firstAPI終了')

                // secondAPI
                console.log('3:secondAPI実行')
                const secondResult = await axios.get("http://localhost:3000/api/second);
                console.log('4:secondAPI終了')

                this.data= secondResult.data;

            } catch (error) {
               console.log(error);
               this.error = error;
            }
        }
    }
};
</script>

---

補足情報 (OS, ツールのバージョンなど)

• "vue": "^2.5.2"
• "vue-router": "^3.0.1"
• "vuex": "^3.0.1"
• "axios":"^0.18.0"