Laravel et vuejs -> Comment passer les données du contrôleur dans ma vue Vue?

Je découvre php, laravel, vuejs en même temps et je suppose qu'il y a des choses que je n'ai pas encore bien réussies;)

J'ai fait un nouveau composant "tableau" qui est une table basique et j'aimerais pour l'utiliser à de nombreux endroits dans mon application, où je spécifierais simplement son titre, ses colonnes et ses données. FootballerController est l'endroit où j'obtiens toutes mes données.

Voici ce qui fonctionne actuellement:

app.js

const tableau = new Vue({
    components:{tableau:Tableau
   }
}).$mount('#tableau');

  <tableau
    v-bind:titre="{{ $title }}"
    :rows="{{ $gridData }}"
    :columns="{{ $gridColumns }}" >
  </tableau>

public function footballer($id){
    //process to get all this data in DB ($footballer, $gridData, $gridColumns, $title)
$footballer= (Footballer::select(SOME REQUEST)->where('id', '=', $id)->get())[0];

        return view('footballers/footballer', ['footballer' => $footballer,
        'gridData' => $gridData,
        'gridColumns' =>  $gridColumns,
        'title' => $title] );
    }

Cela fonctionne.

Ensuite, voici ce que je voudrais: pouvoir mettre mes valeurs du contrôleur dans footballer.blade.php, qui utilise TableauComponent.vue p>

FootballerController

<template>
    <div >
       <h1 >{{titre}}</h1>
       <table >
            <thead>
            <tr>
                <th v-for="key in columns"
                    {{ key | capitalize }}
                </th>
            </tr>
            </thead>
            <tbody>
                <tr v-for="entry in rows">
                    <td v-for="key in columns">
                    {{entry[key]}}
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>


<script>
export default {
    name:'tableau',
    props: {
        rows: Array,
        columns: Array,
        titre: String
  }
}
</script>

Et dans footballer.blade.php

<tableau
    v-bind:titre="title"
    :rows="gridData"
    :columns="gridColumns "
    :filter-key="searchQuery" >
  </tableau>

Ensuite, dans app.js , je n'aurais plus besoin de données

const tableau = new Vue({
    components:{tableau:Tableau
   },
   data: function() {
        return  {
            title: "the best footballers",
            searchQuery: '',
            gridColumns: ['footballer', 'cote', 'nationalite'],
            gridData: [
                { footballer: 'Remond', cote: 951, nationalite:'USA' },
                { footballer: 'Marcel', cote: 935, nationalite:'ESP' },
                { footballer: 'Stian', cote: 923, nationalite:'NOR' },
                { footballer: 'Martin', cote: 923, nationalite:'USA' },
                { footballer: 'Pierre', cote: 918, nationalite:'ESP' },
            ]
        }
   }
}).$mount('#tableau');

Mais cela ne fonctionne pas et me dit "La propriété ou la méthode n'est pas définie sur l'instance mais référencée lors du rendu"

Je ne gère pas du tout et je suis fatigué est-ce que j'ai la bonne façon de faire: ne dois-je pas récupérer mes données dans FootballerController? Sinon, où puis-je l'obtenir?

Merci beaucoup à l'avance.