How to make a clone of the array object with new id and same name?

I'm new at vue3 and javascript. I have 2 lists and drag and drop system. The problem is when I drag and drop component from one list to another, I increase an id by 1, but I can't get the name of dragged object and display it. The problem displayed at methods in method "cloneComponent"

<template>
  <div class="full-zone">
    <div class="components">
      <h3>Компоненты бота:</h3>
      <draggable
          class="dragArea"
          :list="list1"
          :group="{ name: 'people', pull: 'clone', put: false }"
          :clone="cloneComponent"
          @change="log"
          item-key="id"
      >
        <template #item="{element}">
          <div class="list-group-item">
            {{ element.name }}
          </div>
        </template>
      </draggable>
    </div>

    <div class="constructor">
      <h3>Конструктор</h3>
      <draggable
          class="constructor-list"
          :list="list2"
          group="people"
          @change="log"
          item-key="id"
      >
        <template #item="{ element, index }">
          <div class="list-group-item">
            {{ element.name }}
            <div>
              <input type="text" class="input" v-model="element.text" placeholder="Введите текст компонента" />
              <span @click="remove(index)" class="remove">x</span>
            </div>
          </div>
        </template>
      </draggable>
    </div>

    <div>
      <button class="btn">Сгенерировать бота</button>
    </div>
    <rawDisplayer class="col-3" :value="list1" title="List 1" />
    <rawDisplayer class="col-3" :value="list2" title="List 2" />
  </div>
</template>

<script>
import draggable from "vuedraggable";
let idGlobal = 4;
export default {
  name: "clone",
  display: "Clone",
  order: 2,
  components: {
    draggable
  },
  data() {
    return {
      list1: [
        { name: "Сообщение", text: "", id: 1 },
        { name: "Заметка", text: "", id: 2 },
        { name: "Кнопка", text: "", id: 3 },

      ],
      list2: []
    };
  },
  methods: {
    log: function(evt) {
      window.console.log(evt);
    },
    cloneComponent() {
      return {
        id: idGlobal ++,
      }
    },
    remove(idx) {
      this.list2.splice(idx, 1);
    },

  }
};
</script>

How to return not only "id", but "name" at the same time? Please help.