Cannot set properties of null (setting '__draggable_context')

.github/workflows/main.yml

@@ -0,0 +1,59 @@
+# This is a basic workflow to help you get started with Actions
+
+name: CI
+
+# Controls when the workflow will run
+on:
+  # Triggers the workflow on push or pull request events but only for the master branch
+  push:
+    branches: 
+      - main
+      - "releases/**"
+      - master
+  pull_request:
+    branches: [ master ]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# A workflow run is made up of one or more jobs that can run sequentially or in parallel
+jobs:
+  # This workflow contains a single job called "build"
+  build:
+    # The type of runner that the job will run on
+    runs-on: ubuntu-latest
+
+    # Steps represent a sequence of tasks that will be executed as part of the job
+    steps:
+      # 拉取 github 仓库代码
+      - uses: actions/checkout@v3
+      # 设定 node 环境
+      - uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+          # 设置发包 npm 地址仓库
+          registry-url: https://registry.npmjs.org
+      # 安装依赖，相当于 npm ci
+      - name: Install dependencies 📦️
+        run: npm install
+      # 执行构建步骤
+      - name: 构建
+        run: |
+          npm run build
+      # 执行部署
+      - run: npm publish
+        env:
+          # 刚刚设置的 NPM_TOKEN
+          NODE_AUTH_TOKEN: ${{secrets.NPM_TOKEN}}
+      # Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
+      - uses: actions/checkout@v3
+
+      # Runs a single command using the runners shell
+      - name: Run a one-line script
+        run: echo Hello, world!
+
+      # Runs a set of commands using the runners shell
+      - name: Run a multi-line script
+        run: |
+          echo Add other actions to build,
+          echo test, and deploy your project.

README.md

@@ -13,17 +13,15 @@
 
 Vue component (Vue.js 3.0) allowing drag-and-drop and synchronization with view model array.
 
-For Vue 2 and Vue 1 version check: https://github.com/SortableJS/Vue.Draggable
-
-Based on and offering all features of [Sortable.js](https://github.com/RubaXa/Sortable)
+Based on and offering all features of [Sortable.js](https://github.com/RubaXa/Sortable) [vue.draggable.next](https://github.com/SortableJS/vue.draggable.next) 
 
 ## Demo
 
 ![demo gif](https://raw.githubusercontent.com/SortableJS/vue.draggable.next/master/example.gif)
 
 ## Live Demos
 
-https://sortablejs.github.io/vue.draggable.next/
+https://zhyswan.github.io/vue3.draggable/
 
 ## Features
 
@@ -52,23 +50,12 @@ Find this project useful? You can buy me a :coffee: or a :beer:
 ### With npm or yarn 
 
 ```bash
-yarn add vuedraggable@next
+yarn add zhyswan-vuedraggable
 
-npm i -S vuedraggable@next
+npm i zhyswan-vuedraggable
 ```
 
-### with direct link 
-```html
-
-<script src="//cdnjs.cloudflare.com/ajax/libs/vue/3.0.2/vue.min.js"></script>
-<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
-<script src="//cdn.jsdelivr.net/npm/[email protected]/Sortable.min.js"></script>
-<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
-<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/4.0.0/vuedraggable.umd.min.js"></script>
 
-```
-
-[cf example section](https://github.com/SortableJS/Vue.Draggable/tree/master/example)
 
 
 ## Typical use:
@@ -105,7 +92,9 @@ The `item` slot should be used to display items of the list. It receives the ele
 ``` html
 <draggable v-model="myArray" tag="transition-group" item-key="id">
   <template #item="{element}">
+    <div>
       <div> {{element.name}} </div>
+    </div>
   </template>
 </draggable>
 ```
@@ -137,7 +126,7 @@ The `item` slot should be used to display items of the list. It receives the ele
 
 ```html
 <draggable v-model='myList'>
-``` 
+```
 
 ```javascript
 computed: {