Pass the many to many relation value to vue file

I have a table discounts which has many to many relation with items table And I have use Vue.js and Laravel for this

In My vue file I have

data: function() {
     return {
          books:[],
          options:[],
     };
},
methods:{
     getBooks: function(query) {
        axios.post('/admin/search-books',{
            keyword: query,
        }).then((response) => {
           console.log(response.data);
           this.options = response.data;
        }).catch((error) => {
           console.log(error.data);
        })
     },
}

and In my form I have this

<discount-form :action="somthing">
   <form class="form-horizontal form-create" method="post" @submit.prevent="onSubmit" 
       :action="this.action" novalidate>
     <multiselect v-model="books" placeholder="Name / ISBN of Books" label="name" track- 
     by="id" :options="options" :multiple="true" @search-change="getBooks" 
     :show-labels="false" :close-on-select="false" name="books[]">. 
     </multiselect>
   </form>
</discount-form>

I store the attach the items perfectly there is no any problem in that . But when I comes in edit form

I passed the value from controller like this

public function edit(Discount $discount) {
    $books = $discount->items
    return view('admin.edit,compact('discount','item'));
}

and in my component I passed item prop like this

<discount-form :data="{{$discount->toJson()}}" :items="{{ $books->toJson() }}">

and js file I have done this

props:['items'],
// and added mounted() and done this in that 
mounted() {
    this.items = this.books
}

But this did not work and gives me error something like this

 Error in getter for watcher "filteredOptions": "TypeError: Cannot read property 'concat' of undefined"

TypeError: Cannot read property 'concat' of undefined

and others ....