Vue3(3.2)でvue.draggable.nextを使う

なぜ改めてVueDraggableについて記事を立ち上げたのか？

ここ最近、新しく作る物には練習を兼ねてLaravel＋Vue3で作るようにしています。

で、ふと「並び替えて」保存する必要が出てきました。

まぁここはVueDraggableの出番なので、Vue3対応とか色々調べてみたところ、
パッケージが他のVue3対応と同じように「next」付きになっている事に気が付きました。

そこで使ってみると若干書き方が変わっている。

今までのだとリンク内にもありますがめっちゃ簡略化して書くと
展開するリスト（オブジェクト配列）が「myArray」としますと

<draggable v-model="myArray">
    <div v-for="(item , index) in myArrayt" :key="index">
        {{item.name}}
    </div>
</draggable>

って感じがベーシックな感じかと。

今回私が問題だったのは例のコードで言う「index」がさっとわからなかった所。

並び替えてその順番を保存したいだけならindexすら書く必要がありませんが、内容も保存して一緒に更新したいとかですとindexが無いと中身を更新するのが手間になります。
例コードを少し書き換えれば

vue2(vue.draggable )

<draggable v-model="myArray">
    <div v-for="(element, index) in myArray" :key="index">
        もとの値：{{ element.name }}
        変更後の値：<input type="text" v-model="myArray[index].name" />
    </div>
</draggable>

みたいな感じでしょうか？
これで10行あったとしてそれぞれを更新するような事が可能になります。

で、結局はこれをnextで書くとしたら？？？って事だったんです。

結論はgithubにちゃんと書いてあったんですけど、かなり下の方で、私のやりたいことをみんなは違うやり方で実行しているのだろうか・・？

上記をnextで書いてみます（簡略化）

vue3(vue.draggable.next)

<draggable :list="myArray" item-key="id">
    <template #item="{ element , index }">
        もとの値：{{element.name}}
        変更後の値：<input type="text" v-model="myArray[index].name" />
    </template>
</draggable>

こうなります。
ループ部分が「template」でくくる事になったところが主だった新しい書き方なんですが、gitのコードはひたすら「#item="{ element}"」としか書いてない。
かなり下の方にやっと「{element , index}」が書いてあって「あっ！！！」ってなりました。

答えがわかればv-forとの対応で「ああ、当たり前だな！」ってなるんですが、発見するまで1時間以上試行錯誤してしまいました・・

一応Vue3.2(.37)で書いてますが、多分3以上なら同じではないでしょうか。

わざわざ記事を立てるまでではないかと思いましたがちゃんと結論が出たので忘備録で残しておこうかと思いました。