Vue JS：拖动组件以使其与其他组件碰撞

Question

我想创建一个可拖动的匹配系统。我有一个像这样的系统：

我希望能够将A组中的一个正方形拖到B组中的另一个正方形，并根据其两个数据计算总和。

我尝试使用VueJS Draggable，但是我不知道如何从A组到B组碰撞正方形。

除了布局，我什么都没有编码，因为我不知道从哪里开始。

我应该从哪里开始？我想从头开始，但是我不知道如何在vue中本地实现拖放

谢谢