title: changing a single value using v-model / full table is redrawn
body: <p>I was building an editable table, which began to crawl to a halt when the number of rows started to run in the 100's. This led me to investigate what was going on. </p>
  
  <p>In the example below, when changing the value in the input, the whole table is redrawn, and the <code>ifFunction()</code> function is trigged 4 times.</p>
  
  <p>Why is this happening? Shouldn't Vue be capable of just redrawing the respective cell? Have I done something wrong with the key-binding?</p>
  
  <pre><code>&lt;template&gt;
      &lt;div id="app"&gt;
  
          &lt;table border="1" cellpadding="10"&gt;
              &lt;tr v-for="(row, rowKey) in locations" :key="`row_+${rowKey}`"&gt;
                  &lt;td v-for="(column, columnKey) in row" :key="`row_+${rowKey}+column_+${columnKey}`"&gt;
                      &lt;span v-if="ifFunction()"&gt;{{ column }}&lt;/span&gt;
                  &lt;/td&gt;
              &lt;/tr&gt;
          &lt;/table&gt;
  
          &lt;input v-model="locations[0][1]"&gt;
  
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  
      export default {
  
          data() {
              return {
                  locations: [
                      ["1","John"],
                      ["2","Jake"]
                  ], // TODO : locations is not generic enough.
              }
          },
  
          methods: {
              ifFunction() {
                  console.log('ifFunction');
                  return true;
              },
          }
      }
  &lt;/script&gt;
  </code></pre>