axiosで取得したデータでswiperのオプションの値に設定したい

Question

質問失礼いたします。

swiper.jsでスライド機能を実装しているのですが、initial-slideオプションの値をaxiosで取得した数値にしたいのですが、恐らくaxiosで非同期でデータを取得してからオプションに入れると順番的にうまくいかないようで何かいい方法はありますでしょうか。ちなみにonMounted(() => { ここに処理 });でやっても駄目でした。

<swiper :space-between="20" :initial-slide="dataNum">
	<swiper-slide class="item" v-for="hoge in hoges" :key="hoge">
	</swiper-slide>
</swiper>

うまくいくコード

<script lang="ts">
	import axios from 'axios';

	export default {
		setup() {
			const dataNum = ref(7);
			return {
				ref,
				dataNum
			};
		}
	}
</script>

うまくいかないコード

<script lang="ts">
	import axios from 'axios';

	export default {
		setup() {
			const dataNum = ref();
			axios.get(
				`/api-date`,
			).then(response => {
				dataNum.value = response.data.num; // 結果は7
			});
			return {
				ref,
				dataNum
			};
		}
	}
</script>

Answer 1

swiper部分をコンポーネントにして、axiosでデータを取得してから表示させればどうでしょうか。

<template>
  <Component :is="comp" :dataNum="dataNum"></Component>
</template>

<script>
import axios from 'axios';
import SwiperContainer from './components/SwiperContainer.vue';

export default {
  setup() {
    const dataNum = ref();
    const comp = ref(null)

    axios.get(
      `/api-date`,
    ).then(response => {
      dataNum.value = response.data.num; // 結果は7
      comp.value = SwiperContainer;
    });
    return {
      ref,
      dataNum,
      comp
    };
  }
}