Vue Предупреждение при передаче данных из шаблона лезвия в vue

Question

Я получаю эту ошибку от vue

[Vue warn]: свойство или метод «product» не определены в экземпляре, но используются во время рендеринга. Убедитесь, что это свойство является реактивным, либо в параметре данных, либо для компонентов на основе классов, инициализируя свойство.

Я не уверен, где я ошибся, чтобы получить эту ошибку. Вот мой код

Home. vue

<template>
    <div class="container">
        <h1>This is the product page</h1>
    </div>
</template>

<script>
    export default {
        props: ['product'],

        data() {
          return {

          }
        },
        mounted() {
            console.log(this.product);
        }
    }
</script>

, а это мой product.blade. php

<div class="row">
    <div class="col-md-12 mt-5">
        <div id="app">
            <home :product="product"></home>
        </div>
    </div>
</div>

, и это в моем ProductsController

public function show(Product $product)
{
    return view('welcome', [
        'product' => $product
    ]);
}

Answer 1

<home :product="{{ $product }}"></home>

Продукт поступает от вашего контроллера, и чтобы использовать его в blade-сервере, вы должны использовать {{ }}