【Vue.js+RailsAPI】更新しても順番が保存されているドラッグ&ドロップ機能の実装

Todoアプリなどでよくある「ドラッグ&ドロップ（以下D&D)」機能、憧れますよね。
自分もアプリ開発の際に実装してみたくなり、挑戦しました。

ただ、大きな壁にぶつかりました・・・

更新するとせっかく並び替えた順番が元に戻る

ほとんどこの一言につきます。

そして、ドラッグ&ドロップの実装をまとめてくださっている記事は、
自分が調べた限り、フロントサイドで話が完結しているものがほとんどでした。
もしくはローカルストレージを用いたもの。

私の場合フロントはNuxt.jsを用いてVue.jsで開発し、
サーバーサイドはRailsのAPIモードを使用しておりました。

そのため、何とかデータベースに「D&Dした後の順番」を保存したかったのです。

今回は上記の環境で「ブラウザの更新をしても順番を保持してくれる」D&Dの実装をまとめました。

以下のQiitaをご覧ください。

※言い訳ですがプログラミングの学習を始めて3ヶ月目、Vue.jsは3週間の初学者です。
言い回しの間違い等あるかと思いますが、ご容赦くださいませ。
また、後学のため是非コメントにてご指摘をお願いします。