Problems caused by Vue reusing the same component

The situation is this,
In a vue, I reference the A component and use it twice, the code is as follows:

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

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

components:{
A
}

Subcomponent A is composed of two selects, and the selector list data needs to be requested asynchronously.
After the parent component gets formData, it will change the ToRefresh value to true. The A component watches this value - it will trigger an asynchronous axios request to get the A component.

The current problem is that the first A component cannot display the selected text normally, but the second A component can. If the second A component is deleted, the only A component can be displayed normally. As shown in the figure:

Bad attempt:
At the beginning, Baidu took a look, and the second component was re-introduced with a different name, like this - failed

<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
}

Second attempt to specify child component using ref - fails:

<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()

The third time added setTimeout to the second attempt, making the second component 300ms slower to respond - it worked! !

<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)

Correct display:

Do not know if there are any other good solutions?