title: VueJS - Push data into array in V-Bind
body: <p>I am trying to retrieve data from a list of devices and depending on the number of device, it will graph the data on the chart. The data will also be updated every one second, in other words, I would like to have the chart keep graphing the data in "real-time"</p>
  
  <p>Here is my current code</p>
  
  <p>index.html</p>
  
  <pre><code>&lt;div v-for="data in devices"&gt;
      &lt;line-chart :data="[[data.time, data.value]]"&gt;&lt;/line-chart&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>script (Vue instance)</p>
  
  <pre><code>var displayDataArray = [];
  
  var socket = io.connect();
    socket.on('stream', function (sensorData) {
      app.devices = sensorData.deviceList;
      ProcessData(app.devices);
    });
  
    function ProcessData(dataObject) {
      var sensorValue;
      for (sensorValue in dataObject) {
        var deviceValue = dataObject[sensorValue];
        displayDataArray.push([deviceValue.timestamp, parseInt(deviceValue.lux)]);
      }
    }
  
    var app = new Vue({
      el: "#app",
      data: {
        devices: {},
        chartData: displayDataArray
        },
      methods: {
        update() {
          console.log(this.devices);
        }
      }
    });
  </code></pre>
  
  <p>However, the data is always graphed at one single point. It is not appending onto an array. If I bind <code>:data="chartData"</code> in <code>&lt;line-chart&gt;</code>, it use the data on the second device (if there are two devices is being passed into the <code>devices</code> object) to display on both graph. </p>
  
  <p>Is there a good way to implemented this functionality?</p>
  
  <p>FYI, here is how the object <code>devices</code> looks like</p>
  
  <p><a href="https://i.stack.imgur.com/vjClq.png" rel="nofollow noreferrer">devices's object</a>
  Thank you for your help!</p>