Как можно интегрировать компонент VueDraggable в Vue 3 с использованием только ванильного JavaScript, без сборщиков и команд import?

Для интеграции компонента `vue3-draggable` в проекте на Vue 3 без использования сборщиков и с помощью CDN, следует учитывать, что сам компонент может экспортироваться с некоторыми особенностями, которые необходимо учесть при его регистрации. Чтобы исправить ошибку, вы можете попробовать следующий подход.

### Пример интеграции VueDraggable

1. **Подключите необходимые скрипты через CDN**:

```html
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue3-draggable.umd.min.js"></script>
```

2. **Создайте шаблон Vue**:

Добавьте HTML-элемент, который будет являться контейнером для вашего приложения Vue.

```html
<div id="app">
    <draggable v-model="items" item-key="id" @update:modelValue="updateItems">
        <template v-slot="{ item }">
            <div class="item">{{ item.name }}</div>
        </template>
    </draggable>
</div>
```

3. **Инициализируйте Vue приложение**:

Настройте ваше приложение Vue, зарегистрируйте компонент `draggable` и настройте данные:

```javascript
const app = Vue.createApp({
    data() {
        return {
            items: [
                { id: 1, name: 'Item 1' },
                { id: 2, name: 'Item 2' },
                { id: 3, name: 'Item 3' },
            ]
        };
    },
    methods: {
        updateItems(newItems) {
            this.items = newItems;
        }
    }
});

// Регистрация компонента draggable
app.component('draggable', window['vue3-draggable'].default);

// Монтируем приложение
app.mount('#app');
```

### Объяснение

1. **Подключение библиотек**: Убедитесь, что скрипты загружаются в правильном порядке: сначала Vue, затем `vue3-draggable`.

2. **Использование компонента**: При использовании компонента `draggable` необходимо использовать `v-model` для привязки к массиву элементов. Также важно правильно определить `item-key`, который будет уникальным идентификатором для каждого элемента.

3. **Шаблон слотов**: Если вы хотите использовать пользовательский шаблон (например, `<template v-slot>`) внутри `draggable`, убедитесь, что вы правильно указываете слот, как это сделано в примере выше.

4. **Методы и реактивность**: Метод `updateItems` используется для обновления массива с элементами при изменении их порядка, что является стандартной практикой при использовании компонентов перетаскивания.

С помощью этого подхода вы сможете успешно интегрировать компонент `vue3-draggable` в ваш проект на Vue 3 без использования сборщиков.

- app.component('draggable', window['vue3-draggable']);
+ app.component('draggable', window['vue3-draggable'].default);