problems with vue-draggable laravel 5.7 (problems with vue-draggable laravel 5.7)

I call him in laravel and he only shows me this I do not know why it does not work

 <template>
    <table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>

                 <th>Visible</th>
                <th>Order</th>

            </tr>
        </thead>

        <draggable :list="questionOptionNew"  :options="{animation:200, handle:'.my-handle'}" :element="'tbody'" @change="update" >

            <tr v-for="item in questionOptionNew" :key="item.id">
                <td>
                    {{ item.id }}
                </td>
                <td>{{ item.name }}</td>
                <td>{{ item.visible }}</td>

                <td>{{ item.order }}</td>

            </tr>

        </draggable>

    </table>
</template>

<script>
    import draggable from 'vuedraggable'
    export default {
        components: {
            draggable
        },
        props: ['question'],
        data() {
            return {
                questionOptionNew: this.question,
                csrf: document.head.querySelector('meta[name="csrf-token"]').content
            }
        },
        methods: {
            update() {
                this.questionOptionNew.map((data, index) => {
                    data.order = index + 1;
                })
                axios.put('/QuestionOption/updateAll', {
                    question: this.questionOptionNew


                }).then((response) => {
                    // success message
                })
            }
        },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

view

@extends('layouts.app')

@section('content')
<div id="app">
 <div class="container">


    <table-draggable :question="{{ $questionOption }}"></table-draggable>


 </div>
</div>
@section('extra-js')
    <script src="{{ asset('js/app.js') }}"></script>
@endsection


@endsection