Problem with showing data in a Vue.component

I am trying to use the vue.component to show some data, this is my html and js file

Vue.component('process-list', {
template:'<div v-for="process in serverResponce" :serverResponce="serverResponce"> ' +
            ' <article class="message is-info">' +
            ' <div class="message-header">' +
            '   <p> {{ process.Process }} id: {{ process.ProcessID }}</p>' +
            ' </div>' +
            ' <div class="message-body">' +
            ' </div>' +
        ' </article>' +
        '</div>',             
data() {
    return {
        serverResponce: [
            {"Process": "xxx","ProcessID": "20792","IOWrites": 
            "267","VirtualBytes": "4 MB","VirtualBytesPeak": 
         "4.29 MB","WorkingSet": "1.38 MB","WorkingSetPeak": 
            "3.69 MB","ProcessorTime": "0"}, 
            {"Process": "yyy","ProcessID": "17372","IOWrites": 
                "96","VirtualBytes": "4.29 MB","VirtualBytesPeak": 
             "4.29 MB","WorkingSet": "5.32MB","WorkingSetPeak": "8.82MB","ProcessorTime": "0"}
        ]
    }                
}
  })

     var app = new Vue({
      el: '#app' 
        })

<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        
        <div class="columns" id="app">
        <div class="column">                    
         <process-list></process-list>                

        </div>
        <div class="column">

          <article class="message is-info">
            <div class="message-header">
              <p>System info</p>
            </div>
            <div class="message-body">
                    <pre>memory and Storage info </pre>
            </div>
          </article>

        </div>
        <div class="column">

          <article class="message is-warning">
            <div class="message-header">
              <p>Backup avaiability</p>
            </div>
            <div class="message-body">                   
                <pre>Backup info </pre>
            </div>
          </article>


        </div>

   </div>

The problem that I have is that the template is not shown when I open the page and I don't get any errors in the console or within the Vue dev tab. If I remove the

<p> {{ process.Process }} id: {{ process.ProcessID }}</p>'

and replace it with some text that the message is shown. This to me says the data is not sent correctly.

Any idea what I am doing wrong?

cheers,

Solution

You are missing single root element for templates just wrap into a div:´

edit: or better put v-for in inner element(article)

Vue.component('process-list', {
template:'<div :serverResponce="serverResponce"> ' +
            ' <article class="message is-info" v-for="process in serverResponce" >' +
            ' <div class="message-header">' +
            '   <p> {{ process.Process }} id: {{ process.ProcessID }}</p>' +
            ' </div>' +
            ' <div class="message-body">' +
            ' </div>' +
        ' </article>' +
        '</div>',             
data() {
    return {
        serverResponce: [
            {"Process": "xxx","ProcessID": "20792","IOWrites": 
            "267","VirtualBytes": "4 MB","VirtualBytesPeak": 
         "4.29 MB","WorkingSet": "1.38 MB","WorkingSetPeak": 
            "3.69 MB","ProcessorTime": "0"}, 
            {"Process": "yyy","ProcessID": "17372","IOWrites": 
                "96","VirtualBytes": "4.29 MB","VirtualBytesPeak": 
             "4.29 MB","WorkingSet": "5.32MB","WorkingSetPeak": "8.82MB","ProcessorTime": "0"}
        ]
    }                
}
  })

     var app = new Vue({
      el: '#app' 
        })

<link rel="stylesheet" href="https://unpkg.com/buefy/dist/buefy.min.css">
        <link rel="stylesheet" type="text/css" href="style.css" />
        <script src="https://cdn.jsdelivr.net/npm/vue"></script>
        
        <div class="columns" id="app">
        <div class="column">                    
         <process-list></process-list>                

        </div>
        <div class="column">

          <article class="message is-info">
            <div class="message-header">
              <p>System info</p>
            </div>
            <div class="message-body">
                    <pre>memory and Storage info </pre>
            </div>
          </article>

        </div>
        <div class="column">

          <article class="message is-warning">
            <div class="message-header">
              <p>Backup avaiability</p>
            </div>
            <div class="message-body">                   
                <pre>Backup info </pre>
            </div>
          </article>


        </div>

   </div>