How to use BpmnReplace and replaceElement on elements with the same type

Developers Modeler
1

I am using replaceElement function to create my own Panel using vuetify and vue.js. For Task, I just looked if type of task has changed and I replaced it as follows:

if (element.type !== taskProperties.value.$type) {
    modeler.bpmnReplace.replaceElement(element, {
      type: taskProperties.value.$type,
    } as any);
  }

I wanted to do similar thing with events, but all start events have the same type - bpmn:StartEvent, and I cannot use this function anymore. Is there any solution, where I could replace this events?
This is function I use to update Event:

function updateEvent(element: Element) {
  modeler.modeling.updateModdleProperties(element, getBusinessObject(element), {
    type: eventProperties.value.$type,
    id: eventProperties.value.id,
    name: eventProperties.value.name,
    eventDefinitionType: eventProperties.value.eventDefinitionType,
  });

  if (element.type !== eventProperties.value.$type) {
    modeler.bpmnReplace.replaceElement(element, {
      type: eventProperties.value.$type,
    } as any);
  }
  context.value = modeler.elementRegistry.find((el) => el.id === context.value.id) as Element;
  modeler.eventBus.fire("event.changed");
}

This is my v-select in which i want to change Event:

<v-select
          v-model="eventProperties.$type"
          v-bind="style.inputStyle.value"
          :label="t('type')"
          :items="eventTypes"
          :item-title="(val) => t(val.name)"
          item-value="value"
          @update:model-value="updateEvent(editedEvent)"
        />

EventTypes table:

const eventTypes = [
  {
    value: "bpmn:StartEvent",
    name: "Start Event",
    props: {
      prependIcon: "bpmn-icon-start-event-none",
    },
  },
  {
    value: "bpmn:IntermediateThrowEvent",
    name: "Intermediate Throw Event",
    props: {
      prependIcon: "bpmn-icon-intermediate-event-none",
    },
  },
  {
    value: "bpmn:EndEvent",
    name: "End Event",
    props: {
      prependIcon: "bpmn-icon-end-event-none",
    },
  },
  {
    value: "bpmn:StartEvent",
    name: "Message Start Event",
    props: {
      prependIcon: "bpmn-icon-start-event-message",
    },
  },
  {
    value: "bpmn:StartEvent",
    name: "Timer Start Event",
    props: {
      prependIcon: "bpmn-icon-start-event-timer",
    },
  },
  {
    value: "bpmn:StartEvent",
    name: "Conditional Start Event",
    props: {
      prependIcon: "bpmn-icon-start-event-condition",
    },
  },
  {
    value: "bpmn:StartEvent",
    name: "Signal Start Event",
    props: {
      prependIcon: "bpmn-icon-start-event-signal",
    },
  },
];
2

Events contain an event definition that is being applied to them, i.e. a message start event is a start event with a message event definition.

See how we construct these internally here.