Vue单选框panel组件值单向联动异常，修改第二个同步第一个如何解决？

我现在遇到了一个卡住很久的问题，恳请大家帮忙指明排查方向。我有一个很简单的组件场景，共包含3个组件：

• 父表单组件
• 单选框选择组件
• 承载单选框的panel组件
  每个panel都有独立的data存储当前选中的单选框值，逻辑非常简单：选中单选框时会更新内部值，同时emit变更事件，没有复杂逻辑。
  但出现了不符合预期的单向联动问题：修改panel1的选中值时，panel2的值不会变动；但修改panel2的选中值时，panel1的值会被同步更新。
  我已经花了很长时间尝试各种排查方案都没有找到原因，麻烦大家帮忙指出问题所在，非常感谢。

问题根因 #

问题核心是浏览器原生单选框的默认分组逻辑和你的组件实现冲突：
浏览器会将页面内所有name属性完全相同的<input type="radio">自动归为同一组，同一组内同一时间只能有一个单选框被选中。你两个panel组件内部的单选框使用了相同的name值，导致触发了原生的互斥选中逻辑。

修复方案 #

1. 给每个panel的单选框组配置独立的name属性，可通过props给panel传入唯一标识，拼接生成唯一的name值
2. 若使用第三方组件库的单选框组件，检查组件库的分组配置参数，确保两个panel的单选框归属不同分组
3. 额外排查父组件是否误将两个panel的状态绑定到了同一个响应式变量，确认每个panel的选中值都是独立存储的

内容的提问来源于stack exchange，提问作者PaReeOhNos