Как выбрать данные из корзины в форму с помощью V-формы по API?

Question

Я сделал телегу с вуэйсом и ларавеллой.когда я нажимаю добавить в кошку, он добавляется в корзину.Я хочу сохранить корзину в базе данных с данными клиента.Ввод данных о клиенте и его сохранение, но я не могу выбрать данные корзины из.вот почему это не хранить.Я использую V-форму.Как выбрать данные из корзины в форме V?

вот мой файл компонента:

<div class="col-md-5 float-righ">
        <form @submit.prevent="store" @keydown="form.onKeydown($event)">
            <alert-error :form="form"></alert-error>
        <div class="row mb-2">
            <label for="" class="col-md-3 font-weight-bold">Name</label>
            <div class="col-md-9">
                <input type="text" v-model="form.name" name="name" class="form-control form-control-sm" :class="{ 'is-invalid': form.errors.has('name') }">
                <has-error :form="form" field="name"></has-error>
            </div>
        </div>
        <div class="row mb-2">
            <label for="" class="col-md-3 font-weight-bold">Phone</label>
            <div class="col-md-9">
                <input type="text" v-model="form.phone" name="phone" class="form-control form-control-sm" :class="{ 'is-invalid': form.errors.has('phone') }">
                <has-error :form="form" field="phone"></has-error>
            </div>
        </div>
        <div class="row mb-2">
            <label for="" class="col-md-3 font-weight-bold">Address</label>
            <div class="col-md-9">
                <input type="text" v-model="form.address" name="address" class="form-control form-control-sm" :class="{ 'is-invalid': form.errors.has('address') }" >
                <has-error :form="form" field="address"></has-error>
            </div>
        </div>
        <div class="mb-5">
            <button class="btn btn-sm btn-danger float-left" @click="clearCart">Clear</button>
            <button type="submit" class="btn btn-sm btn-success float-right" @click="store">Checkout</button>
        </div>
        <table class="table table-sm table-bordered table-striped">
            <thead class="text-center">
                <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Qty</th>
                <th>Price</th>
                <th>L/T</th>
                <th>Action</th>
                </tr>
            </thead> 
            <tbody>
                <tr v-for="(cart, i) in carts" :key="i">
                    <td class="text-center">{{cart.id}}</td>
                    <td>{{cart.name}} </td>
                    <td class="text-right">{{cart.qty}}</td>
                    <td class="text-right">{{cart.price}}</td>
                    <td class="text-right">{{cart.price*cart.qty}}</td>
                    <td class="text-center"><button type="button" @click="removeProduct(i)" class="btn btn-sm btn-danger">x</button></td>
                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4" class="text-right font-weight-bold">Total =</td>
                    <td class="text-right"> {{total}}/-</td>
                </tr>
            </tfoot>
        </table>

        </form>
    </div>

Вот мой код скрипта:

export default {
   data(){
      return{
        field: 'name',
        query: '',
        form: new Form({
            'name': '',
            'phone': '',
            'email':''
        }),
        products:[],
        carts:[],
        pagination:{
            current_page: 1
         }
       }
     },
methods:{
    addToCart(product){
        if (this.carts.find(p => p.id === product.id)) {
            product.qty++
        } else {
            this.carts.push(product)
        }
        this.saveCarts();
    },
   store(){
        this.$Progress.start()
        this.form.busy = true
        this.form.post('api/pos')
            .then( res => {
                if(this.form.successfull){
                    this.$Progress.finish()
                }else{
                    this.$Progress.fail()
                }
            })
            .catch( e => {
                this.$Progress.fail()
                console.log(e)
            })

    },
   }
}

Код API:

public function store(Request $request)
{
    $this->validate($request,[
        'name' => 'required',
        'phone' => 'required',
        'address' => 'required'
    ]);

    $order = new OrderMaster;
    $order->name = $request->name;
    $order->phone = $request->phone;
    $order->address = $request->address;
    // $order_id = DB::getPdo()->lastInsertId();
    if ($order->save()) {
        $order_id = $order->id;
        foreach ($request->product_id as $key => $value) {
            $data =  array(
                'order_id' => $order_id,
                'product_id' => $value,
                'qty' => $request->qty [$key],
                'unite_price' => $request->unit_price [$key],
            );

            OrderDetails::insert($data);
        }
    }

    return redirect('pos');
}

Вот скриншот: