Vue多项选择未在编辑表单laravel上显示数据

Question

我在laravel中的表单中使用了vue multiselect 问题是vue没有在编辑表单中显示multiselect的数据，但正在获取正确的数据。

我的表格

<multiselect v-model="selected" :options="options" :loading="isLoading" :internal-search="false" :multiple="true" :close-on-select="false" :hide-selected="true" name="books[]" @search-change="getData" label="name" track-by="id"></multiselect>

我的Vue文件

import AppForm from '../app-components/Form/AppForm';

Vue.component('coupon-form', {
    mixins: [AppForm],
    data: function() {
        return {
            form: {
                name:  '' ,
                description:  '' ,
                valid_from:  '' ,
                valid_till:  '' ,
                discount:  '' ,
                enabled:  false,
                books: [],
            },
            isLoading: false,
            options: [],
            selected: [],
        }
    },
    methods: {
        getData(query){
            this.isLoading = true;
            axios.post('/admin/books/find/'+query)
            .then((response) => {
                this.options = response.data;
                this.isLoading = false;
            })
            .catch((error) => {
                this.isLoading = false;
            });
        },
    },
    watch: {
        selected (newValues) {
             this.form.books = newValues.map(obj => obj.id);
        }

    }
});

并在我的控制器中

 $rules = json_decode($coupon->rules);
        $coupon['thrash_limit'] = $rules->orders_limit ?? '';
        $coupon['thrash_amount'] = $rules->amount ?? '';
        $coupon['thrash_discount'] = $rules->percent ?? '';
        $coupon['books'] = $rules->books ?? '';
        $coupon['free_delivery'] = $rules->free_delivery ?? false;
        return view('admin.coupons.edit', [
            'coupon' => $coupon,
        ]);

注意：规则是json类型的数据，该数据采用名为books的多选值 在我的devTool中，我检查了是否正在获取像这样的数据

任何人都可以知道该怎么做