useSortable: order of dom and array is different

[liuhbin]

Describe the bug

in the vueuse demo: https://vueuse.org/integrations/useSortable/

the problem can be reproduced by following these actions:

result:

temporary solution

<script setup lang="ts">
// ...
useSortable(el, list, {
  onUpdate: (e: { oldIndex: number; newIndex: number }) => {
    const item = list.splice(e.oldIndex, 1)[0]
    nextTick(() => list.splice(e.newIndex, 0, item))
  }
})
</script>

Reproduction

https://github.com/vueuse/vueuse/blob/main/packages/integrations/useSortable/demo.vue

System Info

System:
    OS: Windows 10 10.0.19044
    CPU: (8) x64 Intel(R) Core(TM) i7-6700 CPU @ 3.40GHz
    Memory: 6.28 GB / 15.94 GB
  Binaries:
    Node: 16.13.1 - D:\App\nodejs\node.EXE
    npm: 8.1.2 - D:\App\nodejs\npm.CMD
  Browsers:
    Edge: Spartan (44.19041.1266.0), Chromium (111.0.1661.62)
    Internet Explorer: 11.0.19041.1566
  npmPackages:
    @vueuse/core: ^9.13.0 => 9.13.0
    @vueuse/head: ^1.1.19 => 1.1.19
    @vueuse/integrations: ^10.0.0-beta.2 => 10.0.0-beta.2
    vue: ^3.2.45 => 3.2.47

Used Package Manager

npm

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Make sure this is a VueUse issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to https://github.com/vuejs/core instead.
• Check that this is a concrete bug. For Q&A open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.