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

正确的显示：

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