How to pass data to child component in Vue

Question

Im trying to pass data as props from parent to its child component, but as it is it doesnt work and I cant find what is wrong. Is the way I do it wrong and should I do it differently?

Parent:

<a-course-select :courses="courses"></a-course-select>

...

data() {
    return {
        courses: null,
...
methods: {
        async campSelected(courses) {
            this.courses = courses
            console.log(this.courses) // this works, I can console log courses
        },

Child:

<a-course
            v-for="course in allCourses"
            :key="course.id"
            :name="course.name"
>...

export default {
    components: {
        ACourse,
    },
    props: ['courses'],
    data() {
        return {
            allCourses: this.courses,
        }
    },
}

Answer 1

allCourses: this.courses accesses a prop once on assignment so it's null, this should only be done with props that are expected to be static values.

If a prop is expected to change, it should be accessed only in a computed or watcher in component script section:

...
computed: {
   allCourses() { return this.courses }
},
...

Since courses and allCourses values are the same, courses prop could be accessed directly in the template.