Fix README example to use nextTick, add multiple groups example (#97)

Author: MaxLeiter

.eslintrc.js

@@ -0,0 +1,22 @@
+require("@rushstack/eslint-patch/modern-module-resolution");
+
+module.exports = {
+  env: {
+    node: true,
+  },
+  extends: [
+    "eslint:recommended",
+    "plugin:vue/vue3-recommended",
+    "@vue/eslint-config-typescript",
+    "prettier",
+  ],
+  parser: "vue-eslint-parser",
+  parserOptions: {
+    parser: "@typescript-eslint/parser",
+    sourceType: "module",
+  },
+  rules: {
+    // override/add rules settings here, such as:
+    // 'vue/no-unused-vars': 'error'
+  },
+};

README.md

@@ -64,7 +64,7 @@ import { Sortable } from "sortablejs-vue3";
 ```
 
 4. The `list` and `item-key` props are necessary. The `options` prop is an object that can contain any SortableJS option. You can find a full list of them here: https://github.com/SortableJS/Sortable#options
-    - The `tag` prop is optional and defaults to `div`. It's the HTML node type for the outer element of the included template/slot. 
+   - The `tag` prop is optional and defaults to `div`. It's the HTML node type for the outer element of the included template/slot.
 
 ### Props
 
@@ -102,8 +102,8 @@ You can listen to Sortable events by adding the listeners to the `Sortable` comp
 You need to mount any plugins you want outside of [the default](https://github.com/SortableJS/Sortable#plugins) before importing this library. For example, the below is correct:
 
 ```typescript
-import SortableJs from 'sortablejs';
-import { Swap } from 'sortablejs/modular/sortable.core.esm';
+import SortableJs from "sortablejs";
+import { Swap } from "sortablejs/modular/sortable.core.esm";
 SortableJs.mount(new Swap());
 
 import { Sortable } from "sortablejs-vue3";
@@ -116,14 +116,18 @@ No changes are necessary to work with Vuex or another store. Just pass `store.st
 ```typescript
 const moveItemInArray = <T>(array: T[], from: number, to: number) => {
   const item = array.splice(from, 1)[0];
-  array.splice(to, 0, item);
+  nextTick(() => array.splice(to, 0, item));
 };
 
 onEnd(event) { moveItemInArray(store.state.items, event.oldIndex, event.newIndex) }
 ```
 
 You may also want to see the SortableJS store documentation [here](https://github.com/SortableJS/Sortable#store).
 
+### Examples
+
+- [./src/examples/WithStore.vue](./src/examples/WithStore.vue) - A simple example with a store
+
 ## Development
 
 1. Run `yarn` to install dependencies

package.json

@@ -47,6 +47,7 @@
     "@types/node": "18.14.2",
     "@types/sortablejs": "1.15.0",
     "@vitejs/plugin-vue": "4.0.0",
+    "eslint-config-prettier": "^9.0.0",
     "prettier": "2.8.4",
     "terser": "5.16.5",
     "typescript": "4.9.5",