переделываю работу с тасками todo list'a через API. Не могу понять как обратиться к props при апдейте

Предаю из шаблона в Vue-компонент данные таска, который хочу отредактировать, но не знаю как правильно обратиться к oldtask при axios запросе, а конкретно к id. Вот что в обык. контроллере

  public function edit($id)
    {
        $task = Task::find($id);
        return view('pages.edit', ['task'=>$task]);
    }

компонент в шаблоне

<edit v-bind:oldtask ="{{ json_encode($task) }}"></edit>

Api контроллер

public function update(Request $request)
    {

        $task = Task::find($request->id);

        $task->title = $request->get('title');
        $task->description = $request->get('description');
        $task->save();

    }

компонент Vue

<template>

    <form @submit.prevent="submit">
<!--        <div v-for="old in oldtask">-->
            <div class="form-group">
                <label for="task-title">Task name</label>
                <input v-model="task.title" type="text" name="title"
                       class="form-control" id="task-title">
            </div>

            <div class="form-group">
                <label for="task-description">Task description</label>
                <textarea name="description" class="form-control" id="task-description" rows="3" v-model="task.description"></textarea>
            </div>

            <button type="submit" class="btn btn-success">Update task</button>
<!--        </div>-->
    </form>

</template>

<script>
    export default {
        data() {
            return {
                tasks: [],
                task: {
                    title: '',
                    description: ''
                },

                props: [
                    'oldtask'
                ]

            }
        },

        methods: {

            submit() {
                axios.patch(`/api/tasks/update`, {
                    id: this.oldtask.id,
                    title: this.task.title,
                    description: this.task.description
                })
                    .then(response => {
                        console.log(response)
                    })
            }
        }
    }
</script>

Ответы (1 шт):

Автор решения: Cathari

обшибка была в том, что надо было вынести props. вот рабочий код

template>

    <form @submit.prevent="submit">
            <div class="form-group">
                <label for="task-title">Task name</label>
                <input v-model="task.title" type="text" name="title"
                       class="form-control" id="task-title">
            </div>

            <div class="form-group">
                <label for="task-description">Task description</label>
                <textarea name="description" class="form-control" id="task-description" rows="3" v-model="task.description"></textarea>
            </div>

            <button type="submit" class="btn btn-success">Update task</button>
    </form>

</template>

<script>
    export default {
        props: [
            'oldtask'
        ],
        data() {
            return {
                task: {
                    id: '',
                    title: '',
                    description: ''
                }
            }
        },
        mounted() {
            this.getDate();
        },
        methods: {
            getDate() {
                this.task = this.oldtask;
                // console.log(this.oldtask);
            },

            submit() {
                axios.patch(`/api/tasks/update`, {
                    id: this.oldtask.id,
                    title: this.task.title,
                    description: this.task.description
                })
                    .then(response => {
                        window.location.href = `/`;
                    })
            }
        }
    }
</script>
→ Ссылка