laravelのviewからvueのcomponentに配列を渡す方法

##laravelのviewからvueのcomponentに配列を渡す方法

laravelのviewからvueのcomponentへ配列を渡し、for文で回して値を取得したかったのですが、なかなか苦戦しweb上にもあまり情報がなかったので下記にてシェアいたします。

ここではコードを書くのみとし詳しい説明は最後にリンク先を貼りますのでそちらを参照いただければ幸いです。

##1.laravelのview側の処理

layout.blade.php

<div id="app">
　<my-component v-bind:categories="{{ ($categories) }}"></my-component>
</div>

//$categoriesにはCategoryModelから渡ってきた下記のような配列が格納されています。
ここから「type」をvue.template内で取得します
0: {id: 1, type: "ビジネス", update_at: "2019-11-30 10:33:58", created_at: "2019-11-30 10:33:58"}
1: {id: 2, type: "小説", update_at: "2019-11-30 10:33:58", created_at: "2019-11-30 10:33:58"}
2: {id: 3, type: "テクノロジー", update_at: "2019-11-30 10:34:31", created_at: "2019-11-30 10:34:31"}
3: {id: 4, type: "プログラミング", update_at: "2019-12-08 07:53:36", created_at: "2019-12-08 07:53:36"}

##2.vueのtemplate側の処理(とりあえずの最小構成)

MyComponent.Vue

<template> 
  <div>
      <ul v-for="(category,index) of categories" :key="index">
         <li>{{ category.type }}</li>
     </ul>
  </div>
</template>
<script>
    export default {
        props:["categories"],
        mounted () {
        console.log(this.categories)
    　　}
    }
</script>

//注意点
・<template> 直下に[v-for]を書くと下記のようなエラーがでます。
 Cannot use v-for on stateful component root element because it renders multiple elements.

##3.laravelのindexページ表示部分(layoutをincludeしています)

「npm run dev」でコンパイルした後、下記のようにMyComponent.Vue内の値が表示されます。
・ビジネス
・小説
・テクノロジー
・プログラミング

##4.最後に

下記サイトを参照しました。(＊サイト内英語です。)
Passing data from Laravel to Vue