vue.jsで子コンポーネントで受け取った値を更新するときはpropsで受け取ってdataで名前を変更して使う。

• カスタムタグからv-bindで子コンポーネントに「items」という名前でデータを渡す。
• 子コンポーネントのpropsで「items」を受け取る。
• 子コンポーネントのdataで「lists」にpropsの「items」をセットする。
• propsとdataで同じ名前で定義できない。ワーニングになる。
• 名前を変更してdataとして扱わないと後から更新しても反映されない。一覧データに新規追加した場合などで困る。

blade.php

@section('content')
<list-component :items='{!! json_encode($lists)!!}'></parent-component>
@endsection

ListComponent.vue

<template>
  <div>
    <child-component
      v-for="hoge in lists"
      v-bind:key="hoge.id"
      v-bind:hoge="hoge">
    </child-component>
    <button v-on:click="add()">新規追加</button>
  </div>
</template>

<script>
    import ChildComponent from './ChildComponent'

    export default {
        components: {
            ChildComponent
        },
        props: ['items'],
        data: function () {
            return {
                lists: this.items// ローカル用に差し替えて使う。
            };
        },
        methods: {
            add: function () {
                console.log('新規追加');
                this.sites.push({
                    id: 1,
                    name: ''
                });
            }
        }
        }
    }
</script>