Why does this application of Vue's "v-for" element not work in Laravel?

Question

I am trying to iterate through an array using Vue's smart "v-for" element. However, coupled with Laravel, this does not work. No matter what I do, the desired content does not display, and I continue to receive this error in my console: "Property or method "plans" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property".

If you have any insight on using Vue with Laravel, I would really appreciate it if you helped me answer this question. It's got me stumped! I have inserted code below to take a closer look at.

Here is the site.js relevant to the question:

Vue.component('plan', {
template: '#plan-template',
props: {
    name: {
        type: String,
        required: true
    }
},

})

new Vue({
el: '#app',
data: {
    plans: [
        'The Single',
        'The Hacker',
        'The Teacher',
        'The Curious'
    ]
}

})

Here is the HTML mark-up relevant to the question:

<plan v-for="plan in plans" v-bind:name="name"></plan>

Answer 1

You should give to plan component porperties like

<plan :plans="plans" ...

And plan component has to receive them like...

props: { plans: Array }