Vue3组件间传值的问题

还是个新手

背景·：今天写一个项目，使用表格，通过点击表格上的按钮弹出表单来修改对应列的数值

实现逻辑：这里父组件将表格对应行的数据传给子组件，子组件渲染到表单上并进行修改，修改后从接口发给服务器

问题：写的时候主要的问题就是，当界面刷新后，点击一次表格中按钮，数据显示正常，点击其他行的表格时，数据依然为第一次点击的内容

主要问题：1.为什么第一次的数据能传过去，2.为什么后面的数据传不过去

尝试解决：

这里通过ref或者reactive都不行

在子组件添加watch监听父组件传来的props.value，发现无法监听到，监听props，可以监听成功

说明props是响应式的，但props.value不是响应式的

最终我使用了props来引出其他值，但不知其所以然，只觉得这肯定不是最佳解决方案

最终实现的主要代码：

绑定子组件：

 

 按钮点击的事件（数值更新）：

 

子组件接收数据

 

 

setup返回数据

 

 

绑定props数据