Vue 重複使用同一元件造成的問題

情況是這樣的，
我在一個vue中，引用了A元件，並且使用了兩次，程式碼如下：

<tamplate>
<A :data="formData" :update="ToRefresh"></A>
<A :data="formData" :update="ToRefresh"></A>
</template>

import A from '@/components/A.vue'

components:{
A
}

子元件A是由兩個select組成，選擇器列表資料是需要非同步axios請求的。
在父元件獲得formData後，會把ToRefresh值變為true。A元件watch了這個值——會觸發獲取A元件的非同步axios請求。

目前出現的問題就是：第一個A元件無法正常顯示選中文字，但是第二個A元件就可以。如果把第二個A元件刪除掉，唯一的A元件就可以正常顯示。如圖：

錯誤的嘗試：
一開始百度了下，第二個元件換了個名字重新引入，像這樣——失敗

<tamplate>
<A :data="formData" :update="ToRefresh"></A>
<B :data="formData" :update="ToRefresh"></B>
</template>

import A from '@/components/A.vue'
import B from '@/components/A.vue'

components:{
A,B
}

第二次嘗試使用ref指定子元件——失敗：

<tamplate>
<A ref="A1" :data="formData"></A>
<A ref="A2" :data="formData"></A>
</template>

import A from '@/components/A.vue'

components:{
A
}

// this.ToRefresh=true 不使用子元件watch父元件同一個值的方式
this.$refs.A1.getList()
this.$refs.A2.getList()

第三次在第二次嘗試的基礎上加了setTimeout，讓第二個元件響應慢300毫秒——成功了！！

<tamplate>
<A ref="A1" :data="formData"></A>
<A ref="A2" :data="formData"></A>
</template>

import A from '@/components/A.vue'

components:{
A
}

// this.ToRefresh=true 不使用子元件watch父元件同一個值的方式
this.$refs.A1.getList()
setTimeout(()=>{
    this.$refs.A2.getList()
},300)

正確的顯示：

不知道有沒有其它什麼好的解決方法呢？