#バージョン
Laravel 6.20.2
Vue.js 2.6.12

#問題
LaravelからVueに値を渡した際に、
マイグレーションで作成した初期値の値は正しく表示されるが、
追加した値は正しく表示されない問題が発生した。

検証モードで詳しくみたところ、dataがArray型からObject型に変わってしまうのが原因だと思われます。

検証モード画像
[良い例] dataがArray型になっている。

[悪い例]　dataがObject型になっている。その他、特に変わったところはありません。

#原因
DBからデータ取得後に配列をソートすると、キーが0から始まらなくなるのが原因のようです。
Vue.jsの仕様のようなのですが、詳しい記述は見つからなかったので、
原因は参考程度でお願いします。

コメントにて@nunulk さんより原因の詳細を教えて頂きました。
コメントありがとうございます。

正しくはLaravel と PHP の問題で、
sortByでソートした場合、ソート後にキーを維持してしまい、配列でなく連想配列になるのが原因でした。
(詳細はコメントを確認下さい。)

#コード例
getメソッドの前にクエリビルダのorderByで整列しておくのが重要です。

Controller.php

//[Array型になる良い例]  (orderByメソッドのあとにget() )
public function index(){
$tutorials = Auth::user()->tutorials()->orderBy('created_at')->get();


//[Object型になってしまう悪い例]  (get()したあとにsortByDescメソッド)
$tutorials = Auth::user()->tutorials()->get()->sortByDesc('created_at');


 return [
       'tutorials' => $tutorials,
 ];
}

index.blade.php

      <tutorial
      :initial-title='@json($tutorials)'
      >
      </tutorial>

Tutorial.vue

<script>
export default {
  props: {
    initialTitle:{
      type:Array,
      default:[]
    },
  },
  data(){
    return {
      getLists:this.initialTitle,
    }
  }
}
},

#Collectionを使った場合 (クエリビルダ orderByを使わない場合)
コレクションに対してvalues()メソッドを使う場合も、同じような処理ができます。
valuesメソッドはキーをリセット後、連続した整数にした新しいコレクションを返します。

Controller.php


public function index(){
$tutorials = Auth::user()->tutorials()->get()->sortByDesc('created_at');

 return [
       'tutorials' => $tutorials->values(),  //valuesメソッドを使用
 ];
}

#最後に
Laravelの参考書等を調べても載っていないような情報だったので共有してみました。
もし内容に間違い等あればコメント頂けると幸いです。