title: vue.js: change the values of a table in a reactive way
body: <p>To create a table I am using <code>vuetify</code> <code>data-table</code>. The data is coming from an <code>express</code> server which is requested via <code>axios</code> and then gives me a response that is structured as follows:</p>
  
  <pre><code>[
      {
          datetime: 123456789,
          order: "abc100",
          status: "ok"
      },
      {
          datetime: 123456789,
          order: "abc200",
          status: "ok"
      },
      ...
  ]
  </code></pre>
  
  <p>This response is being used by the vue front as follows:</p>
  
  <pre><code>&lt;v-data-table
      :headers="headers"
      :items="orders"
  &gt;
      &lt;template slot="items" slot-scope="props"&gt;
          &lt;td &gt;{{ props.item.order }}&lt;/td&gt;
          &lt;td class="text-xs-right"&gt;{{ props.item.datetime }}&lt;/td&gt;
          &lt;td &gt;{{ props.item.status }}&lt;/td&gt;
      &lt;/template&gt;
  &lt;/v-data-table&gt;    
  
  
  data () {
      return {
          headers: [
              { ... },
              { ... },
              ...
          ],
          orders: []
      }
  },
  
  created () {
      QueryService.orders().then(response =&gt; this.orders = response.data)       
  }
  </code></pre>
  
  <p>I know that I can change the state via <code>this.orders</code> now without reloading the whole site, but how can I access the individual rows? They are in the array, so how can I add a new one or change an already existing one if I have 1000 orders? its hard to guess them via an index.</p>
  
  <p><strong>EDIT:</strong></p>
  
  <p>I can't update the data-table via <code>this.orders = response.data</code> and I don't know why. The code itself works and I can test via console.log, that <code>this.data</code> is being changed, but the data-table is not being updated!</p>
  
  <pre><code>created () {
      setInterval(function() { 
          QueryService.orders().then(response =&gt; this.orders = response.data)
      }, 15000)
  }
  </code></pre>
  
  <p><strong>EDIT 2:</strong></p>
  
  <p>I figured out that <code>this.orders</code> which is assigned inside <code>QueryService</code> is not the same <code>orders</code> as the one inside <code>data ()</code>, but I still don't know how to access <code>orders</code> inside <code>data ()</code>. I tried <code>this.$data.orders</code>, but it doesn't work either. Anybody has an idea?</p>