Выбранный в VueJs не работает внутри foreach l oop в php с использованием Laravel 5.4

Question

Привет, у меня есть эта выбранная опция, которую я использую через Vuejs. Теперь моя проблема в том, что я использую модал в редактировании. Теперь, когда я нажимаю на редактировать, данные работают хорошо, но в выбранном раскрывающемся списке выбирается только одна строка, другая строка не работает. Это мой код ниже в Модал

@foreach($getCreditCards1 as $getCreditCard1)
        <div class="modal fade" id="creditCard<?php echo $getCreditCard1['id']?>" tabindex="<?php echo $getCreditCard1['id']?>" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
            <div class="modal-dialog modal-dialog-centered" role="document">
                <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLongTitle">Update Credit Card Account</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <div class="form-row">
                            <div class="col-lg-12">
                                <label>Bank Name</label>
                                <input type="text" name="bankName" class="selcls form-control" value="{{ $getCreditCard1['bank_name']}}" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-row">
                            <div class="col-lg-12">
                                <label>Account No</label>
                                <input type="text" name="accountNumber" class="selcls form-control" value="{{ $getCreditCard1['account_no']}}" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-row">
                            <div class="col-lg-12">
                                <label>Account Name</label>
                                <input type="text" name="bankName" class="selcls form-control" value="{{ $getCreditCard1['account_name'] }}" />
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="form-row">
                            <div class="col-lg-12">
                                <label>Type Of Card</label>
                                <div id="app-credit-card-update">
                                    <select name="typeOfCard" class="selcls form-control">
                                        <option value="0">--Please Select--</option>
                                        <option v-for="credit in credits" v-bind:value="credit.value"
                                        :selected="credit.value=={{ json_encode($getCreditCard1['type_of_card'])}} ? true : false ">
                                            @{{ credit.text }}
                                        </option>
                                    </select>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-success">Save changes</button>
                </div>
                </div>
            </div>
    </div>
    @endforeach

в моем редактировании ниже

@foreach($getCreditCards1 as $getCreditCard1)
                                        <tr id="deletedId{{ $getCreditCard1['id'] }}">
                                            <td>
                                            @if($user->role_type !== 3)
                                                <!-- Button trigger modal -->
                                            <a data-toggle="modal" data-target="#creditCard<?php echo $getCreditCard1['id']?>" href="#" title="Edit"><i class="fas fa-pencil-alt"></i></a>
                                            @endif
                                            @if($user->role_type == 1)
                                                <a id="delete" onClick="confirmDelete('{{ $getCreditCard1['id']}}')" href="javascript:void" title="Delete"><i class="fas fa-trash"></i></a>
                                            @endif
                                            </td>
                                            <td><p style="width:180px;">{{ $getCreditCard1['bank_name']}}</p></td>
                                            <td><a href="{{ url('dno-personal/credit-card/ald-accounts/transactions/'.$getCreditCard1['id']) }}">{{ $getCreditCard1['account_no']}}</a></td>
                                            <td><p style="width:180px;">{{ $getCreditCard1['account_name'] }}</p></td>
                                            <td><p style="width:380px;">{{ $getCreditCard1['type_of_card']}}</p></td>
                                            <td><p style="width:200px;">{{ $getCreditCard1['created_by']}}</p></td>
                                        </tr>
                                        @endforeach

Теперь мой Vue код

new Vue({
    el: '#app-credit-card-update',
        data:{
            credits:[
                {text:'HAS PESO & DOLLAR ACCOUNT', value:'HAS PESO & DOLLAR ACCOUNT'},
                {text:'CATHAY PACIFIC ELITE/AMEX/PESO', value:'CATHAY PACIFIC ELITE/AMEX/PESO'},
                {text:'PLATINUM MASTERCARD /PESO & DOLLAR', value:'PLATINUM MASTERCARD /PESO & DOLLAR'},
                {text:'DINERS CLUB PREMIERE(USD)', value: 'DINERS CLUB PREMIERE(USD)'},
                {text:'PLATINUM VISA CARD', value:'PLATINUM VISA CARD'},
                {text:'PLATINUM VISA CARD', value:'PLATINUM VISA CARD'},
                {text:'CITI PREMIERMILES CARD', value:'CITI PREMIERMILES CARD'},
                {text:'MASTERCARD', value:' MASTERCARD'},
                {text:'MASTERCARD PLATINUM', value:'MASTERCARD PLATINUM'},
                {text:'VISA INFINITE', value:'VISA INFINITE'},
                {text:'PLATINUM', value:'PLATINUM'},
                {text:'VISA', value:'VISA'},
                {text:'CREDIT GOLD MASTERCARD', value:'CREDIT GOLD MASTERCARD'},
                {text:'CITI PREMIERMILES ', value:'CITI PREMIERMILES '},
                {text:'GOLD CARD', value:'GOLD CARD'},
                {text:'CITI REWARDS CARD', value:'CITI REWARDS CARD'},
                {text:'GOLD MASTERCARD', value:'GOLD MASTERCARD'},
                {text:'VISA PLATINUM', value:'VISA PLATINUM'},
                {text:'PLATINUM VISA', value:'PLATINUM VISA'},
                {text:'MANGO MASTERCARD', value:'MANGO MASTERCARD'}
            ]
        }
    });

Теперь я хочу, чтобы когда я нажмите изменить в моем моде другие данные, которые будут выбраны. Может кто-нибудь помочь мне разобраться в этом? ТИА