点击多选框，已选显示你选中的，再次点击上边的选中的，下边消失，如果点击下边，则上边却不取消勾选

怎么改成双向的

这个可以把选中的值存成一个数组，勾选和取消都只操作这个数组，上面树结构的勾选展示也是判断这个数组里有没有这个值

然后下面的已选也是跟据这个数组过滤出存在的值渲染出来，勾选和取消一样操作这个数组

这种自己写一大堆麻烦很麻烦,要双向监听,还不如用 el 这种框架

看你的描述，逻辑应该是，点击一个框，反选。
let checkedIds = [] ;

//点击的时候，

let currentId ;

if(checkedIds.includes(currentId )){

checkedIds  = checkedIds .filter(c=> c !== currentId) ;

}else{

checkedIds.push(currentId);

}
上面是不考虑父子关系的。

当然，你还要考虑父子节点的联系。