vue2+组件+ref+数据同步

想封装一个下拉组件来在一个页面中复用多次（如A和B都需要用到），但是子组件返回给父组件的值是用了ref里的值，以致于当我在A中选择了后，B的值也会变化
如何才能分开 让它们在一个页面中互相不影响呢？
我目前想到的解决办法只有把组件复制一次换一个ref
但是仅仅是为了换ref 而把组件代码全部复制出一份来 我觉得不太好，应该怎么处理呢

我这里遇到过类似的情况，
我的解决办法是在子组件中动态生成一个uuid,
不论是id还是ref，都用uuid进行拼接，保证每一个子组件都独一无二：

<div :ref="`xx${uuid}`"></div>

import { v4 as uuidv4 } from 'uuid';

data(){
  return{
    uuid: uuidv4(),
  }
}

相当于子组件自己就生成了自己的身份证

如果感觉有帮助的话，还望采纳一下
有什么想法也欢迎尽情地提出来一起讨论呀~

组件代码不需要复制一份吧，把复用的两个A,B组件绑定不同的ref就行了。

vue组件的data是个函数就是解决这种组件复用数据同步的情况的

如有帮助，望采纳^O^谢谢啦~