LARAVEL : afficher des commentaires avec VUE JS

bonjour
en suivant la série de tutos LARAVEL sur la partie RECUPERER LES COMMENTAIRES AVEC VUE JS, je me suis heurté sur cette erreur que la console me renvoie. j'avoue que je n'y comprends pas grand chose... en meme temps je n'arrive pas à afficher les commentaires... pouvez vous m'aider, s'il vous plait... merci



 ERROR  Failed to compile with 1 errors                      
 error  in ./resources/js/components/Comments.vue?vue&type=template&id=4aa6d95f&
scoped=true&

Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)
  Error compiling template:

  <!-- Comments feed -->

         <div v-for="comment in comments" class="media">
            <img class="d-flex rounded-circle avatar z-depth-1-half mr-1" style=
"width:32px"
                :src="comment.user.avatar" alt="Avatar">
                <h5 v-text="comment.user.name" class="mt-2 font-weight-bold blue
-text"></h5>
         </div>

         <div class="date">
             {{ comment.created_at }}
         </div>

         <div v-text="comment.body" class="ml-5">
         </div>
  - Cannot use v-for on stateful component root element because it renders multi
ple elements.
 @ ./resources/js/components/Comments.vue?vue&type=template&id=4aa6d95f&scoped=t
rue& 1:0-224 1:0-224
 @ ./resources/js/components/Comments.vue
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss
       Asset      Size   Chunks             Chunk Names
/css/app.css   171 KiB  /js/app  [emitted]  /js/app
  /js/app.js  1.34 MiB  /js/app  [emitted]  /js/app

ERROR in ./resources/js/components/Comments.vue?vue&type=template&id=4aa6d95f&sc
oped=true& (./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-
options!./node_modules/vue-loader/lib??vue-loader-options!./resources/js/compone
nts/Comments.vue?vue&type=template&id=4aa6d95f&scoped=true&)
Module Error (from ./node_modules/vue-loader/lib/loaders/templateLoader.js):
(Emitted value instead of an instance of Error)
  Error compiling template:

  <!-- Comments feed -->
         <div v-for="comment in comments" class="media">
            <img class="d-flex rounded-circle avatar z-depth-1-half mr-1" style=
"width:32px"
                :src="comment.user.avatar" alt="Avatar">
                <h5 v-text="comment.user.name" class="mt-2 font-weight-bold blue
-text"></h5>
         </div>

         <div class="date">
             {{ comment.created_at }}
         </div>

         <div v-text="comment.body" class="ml-5">
         </div>

 - Cannot use v-for on stateful component root element because it renders multi
ple elements.

 @ ./resources/js/components/Comments.vue?vue&type=template&id=4aa6d95f&scoped=t
rue& 1:0-224 1:0-224
 @ ./resources/js/components/Comments.vue
 @ ./resources/js/app.js
 @ multi ./resources/js/app.js ./resources/sass/app.scss


Voici le code de mon fichier Comments.vue



<template>

<!-- Comments feed -->

       <div v-for="comment in comments" class="media">
          <img class="d-flex rounded-circle avatar z-depth-1-half mr-1" style="width:32px"
              :src="comment.user.avatar" alt="Avatar">
              <h5 v-text="comment.user.name" class="mt-2 font-weight-bold blue-text"></h5>
       </div>

       <div class="date">
           {{ comment.created_at }}
       </div>

       <div v-text="comment.body" class="ml-5">
       </div>

</template>


<script>
    export default {
        name: "Comments",
        props: ['comments'],
        created() {
            console.log(this.comments);
        }
    }

</script>


<style scoped>

</style>


Voici le code de mon fichier show.blade.php



<a href="/profil/extends">@extends</a>('templates.default')

<a href="/profil/section">@section</a>('meta-title' , $title= "$publication->name")
<a href="/profil/section">@section</a>('meta-description' , $description = "Bienvenue sur Werayou")

<a href="/profil/section">@section</a>('content')
  <!-- Edit form -->
  <div class="card my-4">
            <!-- Title -->
      <h5 class="mt-4 ml-2 mr-2">{{$title}}
            <a href="#!"><span class="badge badge-primary"><i class="fas fa-angle-double-right pr-2" aria-hidden="true"></i>{{ $publication->category->name }}</span></a>
            <span class="badge badge-success"> 2165 aiment</span>
            <span class="badge badge-danger"> 1289 n'aiment pas</span>
      </h5>

      <!-- Author -->
      <p class="lead ml-2 mr-2">
          Publié par |
          <a href="#">{{ $publication->user->name }}</a> | Le
          <!-- Date/Time -->
          {{ $publication->created_at }}
      </p>

      <!-- Preview Image -->
      <img class="img-fluid rounded ml-2 mr-2" src="/images/publications/pub.jpg" alt="">
      <hr>

      <!-- Post Content -->
      <div class="ml-2 mr-2">
          <p> {!! $markdown->parse($publication->body) !!} </p>
      </div>

      <!-- reactions numbers -->
      <div class="bg-white rounded box-shadow">
        <!-- bouton editer -->
        <div class="d-flex justify-contend-end mb-1 ml-2 mr-2">
          <a href="{{ url("{$publication->path()}/edit") }}" class="btn btn-primary icon">
            <i class="edit icon"></i>
            Modifier
          </a>

          <hr>
          <form class="" action="{{ url("{$publication->path()}") }}" method="POST">
            <a href="/profil/csrf">@csrf</a>
            <a href="/profil/method">@method</a>('DELETE')
            <button class="btn btn-danger icon">
                <i class="trash icon"></i>
                Supprimer
              </button>
          </form>
        </div>
            <h4> <span class="d-flex justify-contend-end badge badge-success"> 237 Reactions</span></h4>


            <!-- Comment Form -->
            <div class="card my-2">
              <div class="card-body">
                <form action="" method="POST" >
                  <a href="/profil/csrf">@csrf</a>
                  <div class="form-group">
                    <textarea name="body" class="form-control" rows="1" placeholder="Réagissez à propos de cette publication." aria-label="Search"></textarea>
                  </div>
                  <button type="submit" class="btn btn-primary">Publier</button>
                </form>
              </div>
            </div>

            <!-- comments feeds -->
            <comments :comments="{{ $publication->comments()->with('user')->latest()->get() }}"></comments>
      </div>
  </div>

<a href="/profil/endsection">@endsection</a>

Publié le Lun. 18 Févr. 19 à 12h02
70