How to pass a value from Laravel blade to a vue component?

Question

I am working on laravel / vue project and i want to pass a value from laravel blade to the vue component but i get this error :

Missing required prop: "id" at

The vue component:

export default {
    props:{
        id:{
            required : true
        }
    },
    mounted() {
        console.log(this.id)
    },
}

The Laravel blade:

<div id="add_product">
   <add-product :id="{{$product_id}}"></add-product>
</div>

Answer 1

https://router.vuejs.org/guide/essentials/passing-props.html

you should add props true to router

    { path: '/user/:id', component: User, props: true },

Edit : Just remove : from :id <add-product id="{{$product_id}}"></add-product>