调整触发点击事件的元素

src/components/DynamicComponent.vue

@@ -1,6 +1,6 @@
 <template>
-  <div :id="componentId" @click="handleClick">
-    <component :is="componentType" v-bind="componentProps" :class="componentClass" :style="componentStyle">
+  <component @click.stop="handleClick" :id="componentId" :is="componentType" v-bind="componentProps"
+    :class="componentClass" :style="componentStyle">
     {{ componentText }}
     <template v-for="child in componentChildren" :key="child.id">
       <DynamicComponent :component-data="child" />
@@ -9,7 +9,6 @@
       <DynamicComponent :component-data="slot" />
     </template>
   </component>
-  </div>
 </template>
 <script setup lang="ts">
 import { defineProps, computed, onMounted } from 'vue';

src/components/MainView.vue

@@ -69,7 +69,7 @@ useDraggable(el2, componentsList, {
   },
   clone(element) {
     return {
-      id: uuid(),
+      id: `${element.type}-${uuid()}`,
       name: element.name,
       type: element.type,
       props: element.props,