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)

正确的显示：

不知道有没有其它什么好的解决方法呢？