[Bug Report]: 自定义vue节点时，拖拽创建节点，mounted执行两次

### 发生了什么？

代码如下
```

节点面板

import { onMounted, ref } from 'vue'
import LogicFlow from '@logicflow/core'
import { register, getTeleport } from '@logicflow/vue-node-registry'
import '@logicflow/core/es/index.css'

import ProgressNode from '@/components/LFElements/ProgressNode.vue'

import { DynamicGroup, dynamicGroup, DynamicGroupNodeModel, SelectionSelect } from '@logicflow/extension'
import '@logicflow/extension/lib/style/index.css'

const lfRef = ref<LogicFlow | null>(null)
const containerRef = ref<HTMLDivElement | null>(null)
const flowId = ref('')
const TeleportContainer = getTeleport()

LogicFlow.use(SelectionSelect)

onMounted(() => {
if (containerRef.value) {
const lf = new LogicFlow({
container: containerRef.value,
grid: true,
allowResize: true,
stopMoveGraph: true,
plugins: [DynamicGroup]
})
lf.register({
type: 'GroupNode',
model: CustomGroupModel,
view: CustomGroup
})
register(
{
type: 'custom-vue-node',
component: ProgressNode
},
lf
)
lf.render({})

lf.openSelectionSelect()

lfRef.value = lf
}
})

const handleDragRect = () => {
lfRef?.value?.dnd.startDrag({
type: 'GroupNode'
})
}
const handleDragCircle = () => {
lfRef?.value?.dnd.startDrag({
type: 'circle',
r: 25
})
}
const handleDragText = () => {
lfRef?.value?.dnd.startDrag({
type: 'custom-vue-node'
})
}

class CustomGroup extends dynamicGroup.view {}

class CustomGroupModel extends DynamicGroupNodeModel {
initNodeData(data: any) {
super.initNodeData(data)
// data.properties = {
// collapsible: false
// }
}
}

.flex-wrapper {
display: flex;
gap: 8px;
flex-wrap: wrap;
align-items: center;
}

.viewport {
height: 350px;
position: relative;
overflow: hidden;
}

.el-button + .el-button {
margin-left: 0;
}

*:focus {
outline: none;
}

.rect {
width: 50px;
height: 50px;
background: #fff;
border: 2px solid #000;
}

.circle {
width: 50px;
height: 50px;
background: #fff;
border: 2px solid #000;
border-radius: 50%;
}

.uml-wrapper {
box-sizing: border-box;
width: 100%;
height: 100%;
background: rgb(255 242 204);
border: 1px solid rgb(214 182 86);
border-radius: 10px;
}

.uml-head {
font-weight: bold;
font-size: 16px;
line-height: 30px;
text-align: center;
}

.uml-body {
padding: 5px 10px;
font-size: 12px;
border-top: 1px solid rgb(214 182 86);
border-bottom: 1px solid rgb(214 182 86);
}

.uml-footer {
padding: 5px 10px;
font-size: 14px;
}

/* 输入框字体大小和设置的大小保持一致，自动换行输入和展示保持一致 */

.lf-text-input {
font-size: 12px;
}

.buttons {
position: absolute;
z-index: 1;
}

.button-list {
display: flex;
align-items: center;
}

```
自定义vue组件如下
```

{{ percentage }}%

import { defineComponent } from 'vue'
import { EventType } from '@logicflow/core'
import { vueNodesMap } from '@logicflow/vue-node-registry'

export default defineComponent({
name: 'ProgressNode',
inject: ['getNode', 'getGraph'],
data() {
return {
percentage: 80
}
},
mounted() {
console.log('------')
const node = (this as any).getNode()
const graph = (this as any).getGraph()
graph.eventCenter.on(EventType.NODE_PROPERTIES_CHANGE, (eventData: any) => {
const keys = eventData.keys as string[]
const content = vueNodesMap[node.type]
if (content && eventData.id === node.id) {
const { effect } = content

// 如果没有定义 effect，则默认更新；如果定义了 effect，则只有在 effect 中的属性发生变化时才更新
if (!effect || keys.some((key) => effect.includes(key))) {
console.log('eventData --->>>', eventData)
this.percentage = eventData.properties?.progress || 0
}
}
})
}
})

```

这会造成 graph.eventCenter.on(EventType.NODE_PROPERTIES_CHANGE, (eventData: any) =>{}). 执行两次 有什么办法能解决吗

### logicflow/core版本

2.0.11

### logicflow/extension版本

2.0.15

### logicflow/engine版本

_No response_

### 浏览器&环境

_No response_