Laravel + Vue.js + vue.draggable 値の指定方法がわからない

Question

前提・実現したいこと

【環境】

• PHP7.2
• Laravel5.6
• Vue.js2.9.6

【データベース】
usersテーブル

id	name	sort_id
1	一郎	1
2	次郎	2
3	三郎	3

userテーブルは上記のようにしており、順番を入れ替えると、sort_idが入れ替わるように実装したいと思っています。

例）
一郎と三郎を入れ替えると以下のようになります。

id	name	sort_id
1	一郎	3
2	次郎	2
3	三郎	1

vue.draggableで入れ替えた後に、入れ替え後の値を表示まではできたのですが、その値をinput文に挿入できないでいます。配列の中の値を取得するにはどのようにすればよいのでしょうか。

該当ソースコード

######sorted.blade.php

<div id="us_dnd" class="us_dnd w-100">
  <user-sorted-component v-bind:users="{{ $users }}">
  </user-sorted-component>
</div>

######app.js

require("./bootstrap");
window.Vue = require("vue");

window.axios = require('axios');
window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';

Vue.component('user-sorted-component', require("./sorted/UserSortedComponent.vue").default);
const us_dnd = new Vue({
  el: "#us_dnd",
})

######UserSortedComponent.vue

<!-- template -->
<template>
<section>
  <div>
    <div @click="switching = !switching">{{ label }}</div>
  </div>
  <div v-show="switching">
    <form>
      <draggable v-model="users" :options="options">
        <div class="item" v-for="(user,usid) in users" :key="user.sort_id">
          <span> 表示順{{ usid + 1}}　【{{user.name}}】</span>
          <input type="hidden" name="userid" v-bind:userid="user.id">
          <input type="hidden" name="sortid" v-bind:sortid="usid">
        </div>
      </draggable>
      <div class="submit-box">
        <input style="text-align: right;" type="button" id="result" value="この順で確定する" @click="sendSortId()" />
      </div>
    </form>
  </div>
</section>
</template>
<!-- vue -->
<script>
import draggable from 'vuedraggable'
export default ({
  name: "user-sorted-component",
  components: { draggable },
  props:{
    'users': {
      type: Object,
      required: true,
    },
  },
  computed: {
    label: function() {
      return this.switching ? "✖閉じる" : "▼表示順を変更する"
    },
  },
  data: function() {
    return {
      switching: false,
      options: {
        animation: 300,
      },
      users: {},
      userid: [],
      sortid: [],
    }
  },
  methods: {
    sendUserSortedSend() {
      const url = '/users/sorted_store';
      let params = new FormData();
      params.append ('userid', this.userid),
      params.append ('sortid', this.sortid),
      axios.post(url, params, { header: {'Content-Type': 'application/x-www-form-urulencoded'}})
        getUserSortedView() {
          axios.get('/users/sorted')
          .then((response) => {
            this.users = response.data;
          });
        }
  }
});
</script>

#####UserController.php

//表示画面
public function userSorted()
{
  $users = User::orderBy('sort_id', 'asc')->get();

  return view('users.sorted', ['users' => $users]);
}

//更新処理
public function userSortedStore(Request $request) 
{
  User::updateOrCreate(
    ['user.id' => $request->input('userid')],
    ['user.sort_id' => $request->input('sortid')]
  );
  $users = User::orderBy('sort_id', 'asc')->get();
  return $users;
}

#####web.php

 Route::get('users/sorted', 'UserController@userSorted');//順番入れ替え出力
 Route::post('users/sorted_store', 'UserController@userSortedStore');//更新処理

教えていただきたいところ

・userid , sortidの値が取得をしたい
・取得したデータを配列へと変換して送信したい

###試したこと
1

      params.append ('userid', this.userid),
      params.append ('sortid', this.usid),

この部分を

      params.append ('userid', user.id),
      params.append ('sortid', user.sort_id),

や

      params.append ('userid', draggable.userid),
      params.append ('sortid', draggable.sort_id),

としても値が取得できません。
ChromeプラグインのVueDevToolsで確認したところ、Array[0]となっています。

2

data: funvtion() {
      users: {},
      userid: [],
      sortid: [],
}

この部分を

data: funvtion() {
      users: {
        userid: [],
        sortid: [],
      },
}

としても、そもそもuserid,sortidが　VueDevToolsに表示されなくなってしまいました。

3
子要素から親要素へ値を渡すことが必要？

      params.append ('userid', this.userid),
      params.append ('sortid', this.sortid),

thisが効いていない。機能していない。そのため、「空の値は不可」とSQLエラーが返ってくる。

初心者ですが、何卒ご教授願います。

Answer 1

以下のあたりのv-bind:userid="[user.id]"記述がおかしい気がするので、

<input type="hidden" name="userid" v-bind:userid="[user.id]">

基本的な使い方を知るために、一度、Vue.jsのドキュメントを全体的に目を通してみた方が良いかと思います。
Vue.js ドキュメント