How to correctly bind a component property that is updated by a webservice in vuejs - vue.js

Question

I have a simple page that gets its data from a set of web services and they are called in an interval. I want to update the page every time the web services gets new data.
My current issue is that while I am getting the data but the child component are not updating themselves and are not showing themselves at all. I have also tried this with static data which works correctly so I am guessing that I am not binding the properties correctly.
Below is the html and script pages
<div class="columns" id="app">
<div class="column">
<process-list v-bind:processesInfo="serverProcesses"></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> <code> {{ memoryResponse }} </code></pre>
<pre>memory and Storage info </pre>
</div>
</article>
</div>
</div>
script
Vue.config.devtools = true
Vue.component('process-info', {
template:' <article class="message is-info">' +
' <div class="message-header">' +
' <p> {{ process.Process }} id: {{ process.ProcessID }}</p>' +
' </div>' +
' <div class="message-body">' +
' <ul>' +
' <li><strong>I/O Writes (Bytes per sec) : </strong> {{ process.IOWrites }} </li>' +
' <li><strong>Virtual Bytes : </strong> {{ process.VirtualBytes }} </li>'+
' <li><strong>Virtual Bytes Peak : </strong> {{ process.VirtualBytesPeak }}</li>'+
' <li><strong>Working Set : </strong> {{ process.WorkingSet }}</li>'+
' <li><strong>Working Set Peak : </strong> {{ process.WorkingSetPeak }}</li> '+
' <li><strong>% Processor Time : </strong> {{ process.ProcessorTime }}</li>' +
' </ul>' +
' </div>' +
' </article>',
props:['process']
});
Vue.component('process-list', {
template:' <div><div v-for="process in processesInfo"> ' +
' <process-info v-bind:process="process"></process-info>'+
'</div></div>' ,
props:['processesInfo'],
// watch:{
// processesInfo(value) {
// this.myProps = value.Processes
// }
// },
// data() {
// return {
// /* processesInfo: [
// {"Process": "edmserver","ProcessID": "20792","IOWrites": "267","VirtualBytes": "4.294967E+09 MB","VirtualBytesPeak": "4.294967E+09 MB","WorkingSet": "1.387725E+07 MB","WorkingSetPeak": "3.692052E+08 MB","ProcessorTime": "0"},
// {"Process": "edmappserver","ProcessID": "17372","IOWrites": "96","VirtualBytes": "4.294967E+09 MB","VirtualBytesPeak": "4.294967E+09 MB","WorkingSet": "5.326848E+07 MB","WorkingSetPeak": "8.826388E+08 MB","ProcessorTime": "0"}
// ] */
// }
// },
})
var app = new Vue({
el: '#app',
data: {
serverProcesses : [],
serverInfo : null,
backupResponce : 'No data!',
memoryResponse : 'No data!',
edmStatusInterval: null,
edmStatusAttemptNumber : 0,
interval : 5000
},
methods: {
pullingEDMstatus : function() {
this.edmStatusInterval = setInterval(this.checkEDMstatus, this.interval);
},
stopPullings : function() {
clearInterval(this.edmStatusInterval);
},
checkEDMstatus : function() {
this.edmStatusAttemptNumber += 1;
fetch(getEDMstatusUrl(), {
method: "POST",
headers: {
"Content-Type": "text/plain"
}
})
.then(response => response.json())
.then(data => {
this.serverProcesses = JSON.stringify(data.Processes, null, 4)
this.serverInfo = JSON.stringify(data.System, null, 4)
})
.catch(error => {
if(error.message === 'Failed to fetch') {
generateErrorMsg('503','Service Unavailable')
} else {
generateErrorMsg('', error.message)
}
})
}
},
beforeDestroy() {
clearInterval(this,polling)
},
created() {
this.pullingEDMstatus()
}
})
I tried to use the v-bind but this does not work here and I don't know what I'm doing wrong. Also I have read that I need to use a watch when the parent property is updated but again did not work for me.
By the way this is my first attempt with vuejs so links and examples are appreciated.
cheers,
es

Answer 1

To solve this problem I moved the methods from the main to the components themselves
Vue.component('process-list', {
template:' <div><div v-for="process in processesInfo"> ' +
' <process-info v-bind:process="process"></process-info>'+
'</div></div>' ,
data() {
return {
processesInfo : [],
statusInterval: null,
interval : 5000
}
},
methods: {
pullingStatus : function() {
this.statusInterval = setInterval(this.checkStatus, this.interval);
},
checkStatus : function() {
this.statusAttemptNumber += 1;
fetch(getStatusUrl(), {
method: "POST",
headers: {
"Content-Type": "text/plain"
}
})
.then(response => response.json())
.then(data => {
this.processesInfo = data.Processes
})
.catch(error => {
if(error.message === 'Failed to fetch') {
generateErrorMsg('503','Service Unavailable')
} else {
generateErrorMsg('', error.message)
}
})
}
},
beforeDestroy() {
clearInterval(this,polling)
},
created() {
this.pullingStatus()
}
})
var app = new Vue({
el: '#app',
data: {
serverInfo : null,
backupResponce : 'No data!',
memoryResponse : 'No data!',
statusAttemptNumber : 0,
}
})
cheers,
es