关于前端: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)

正确的显示：

不晓得有没有其它什么好的解决办法呢？