axios(async/await)を使用した処理について

【バージョン】
laravel：6.18.40
PHP：7.2.31
nginx:1.19.0"

【やっていること】
現在フロント側でvue.js、バックエンドでLaravelを使用しECサイトのアプリケーションの開発をしております。
その中でフロント側からaxiosを使用しAPIを呼び必要なデータを取得する箇所があるのですが動作が
上手くいっておりません。

【処理について】
下記は行いたい処理の流れです。(場面としては管理画面のトップページにアクセスをします)
1.ローディングを表示させる
2.登録商品の情報を取得する
2-1.登録商品取得APIの呼び出し
2-2.APIの返り値が200かチェック
2-3.取得した情報をdata()メソッドで定義してあるオブジェクトの値に代入する
3.購入商品の情報を取得する
3-1.購入商品取得APIの呼び出し
3-2.APIの返り値が200かチェック
3-3.取得した情報をdata()メソッドで定義してあるオブジェクトの値に代入する
4.ローディングを非表示させる

javascript
1<script>
2export default{
3  data(){
4    return {
5      registerproduct: [],//登録商品の情報
6      buyproduct: [],//購入商品の情報
7      loading: false,//値がtrueならローディングを表示、falseなら非表示
8    }
9  },
10  methods: {
11//トップページにアクセスされると呼び出される
12    async fetchProduct(){
13      this.loading = true;//ローディング表示
14      await this.execRegister();//登録商品取得処理呼び出し
15      await this.execBuy();//購入商品取得処理呼び出し
16      this.loading = false;//ローディング非表示
17    },
18
19//登録商品取得処理
20    async execRegister(){
21      const response = await axios.get(`/api/getRegisterProducts`);//登録商品取得API呼び出し
22
23      if(response.status !== 200){//HTTPステータスのチェック
24        this.$store.commit('error/setCode', response.status);
25        return false;
26      }
27
28      this.registerproduct = response.data;//registerproductプロパティに代入
29    },
30
31//購入商品取得処理
32    async execBuy(){
33      const response = await axios.get(`/api/getBuyProducts`);//購入商品取得API呼び出し
34
35      if(response.status !== 200){//HTTPステータスのチェック
36        this.$store.commit('error/setCode', response.status);
37        return false;
38      }
39
40      this.buyproduct = response.data;//buyproductプロパティに代入
41    }
42  },
43
44//監視プロパティ(アクセスがあった場合fetchProductメソッドを呼び出す)
45  watch: {
46    $route: {
47      async handler(){
48        await this.fetchProduct();
49      },
50      immediate: true
51    }
52  }
53}
54</script>

【できないこと】
上手くいかないことが2番(登録商品の情報を取得する)と3番(購入商品の情報を取得する)の並行処理(非同期処理)です。

javascript
1async fetchProduct(){
2 this.loading = true;//1.ローディング表示
3 await this.execRegister();//2.登録商品取得処理呼び出し
4 await this.execBuy();//3.購入商品取得処理呼び出し
5 this.loading = false;//4.ローディング非表示
6}

2番と3番でawaitを指定しているので同期処理になり非同期処理にならないのは分かるのですがawaitを指定していないと2番と3番の処理が終わる前に4番の処理が行われてしまいます。

自分が行いたい流れとしては
1.ローディング表示
↓(2,3番の処理を同時に開始)
2.登録商品取得処理呼び出し　3.購入商品取得処理呼び出し
↓(2,3番の処理が完了)
4.ローディング非表示
としたいです。

【試したこと】
いくつか実現するために試した内容を記載します。

1つ目：2番と3番の処理を1つにまとめる
結果：2番と3番が同期処理されてしまう。

javascript
1async fetchProduct(){
2 this.loading = true;//1.ローディング表示
3 const exec = async ()=>{
4  await this.execRegister();//2.登録商品取得処理呼び出し
5  await this.execBuy();//3.購入商品取得処理呼び出し
6 }
7 await exec();
8 this.loading = false;//4.ローディング非表示
9}

2つ目：2番と3番の処理のawaitを指定しない
結果：2番と3番の処理は並行(非同期)で行われるが終わる前に4番の処理が行われる。

javascript
1async fetchProduct(){
2 this.loading = true;//1.ローディング表示
3 const exec = async ()=>{
4  this.execRegister();//2.登録商品取得処理呼び出し
5  this.execBuy();//3.購入商品取得処理呼び出し
6 }
7 await exec();
8 this.loading = false;//4.ローディング非表示
9}

3つ目：４番の処理にasyncを指定する
結果：2番と3番の処理が終わる前に4番の処理が行われる。

javascript
1async fetchProduct(){
2 this.loading = true;//1.ローディング表示
3 const exec = async ()=>{
4  await this.execRegister();//2.登録商品取得処理呼び出し
5  await this.execBuy();//3.購入商品取得処理呼び出し
6 }
7 const exec2 = async ()=>{
8  this.loading = false;//4.ローディング非表示
9 }
10 await exec();
11 await exec2();
12}