问题背景
在基于 Vue + Element UI 的前端开发中，我们常遇到一个隐蔽的交互 Bug：从列表页新建跳转至详情编辑页时，el-checkbox-group 组件的选中状态在保存并返回列表后再次进入编辑页时出现异常。
具体表现为：
- 首次编辑时能正常勾选第 3 项；
- 返回列表后再点编辑，虽然初始状态显示正确，但点击第 1、3 项无法切换选中状态；
- 原本选中的第 2 项也无法取消；
watch监听不到数据变化，@change事件触发的值始终停留在[2]。
原因分析
这种情况通常不是逻辑错误，而是 Vue 的响应式机制与组件复用策略之间的冲突。
当路由切换导致页面重新渲染时，如果表单容器没有设置动态 key，Vue 可能会复用旧的 DOM 节点。此时，虽然数据模型（v-model）在 JS 层面更新了，但视图层的输入框状态可能仍绑定在旧的数据引用上，导致用户操作无法触发正确的响应式更新。此外，若对象引用未发生浅层或深层变化，Vue 的 diff 算法也可能跳过必要的重绘。
解决方案
要彻底解决此问题，核心在于强制组件销毁重建，确保每次进入编辑页都使用全新的实例。
方案一：添加动态 key
在包裹 el-form 或 el-checkbox-group 的外层容器上，绑定一个随路由参数变化的 :key。这样每次路由跳转都会强制销毁旧组件并创建新实例，彻底清除缓存的状态。
<template>
<div :key="formKey">
<el-form :model="formData" ref="formRef">
<!-- 其他表单项 -->
<el-form-item label="选项">
<el-checkbox-group v-model="formData.options">
<el-checkbox label="1">选项 1</el-checkbox>
<el-checkbox label="2">选项 2</el-checkbox>
< =>选项 3
