title: vuejs data doesn't change when property change
body: <p>I am very new to Vuejs so although I can probably devise a solution myself by using a watcher or perhaps a lifecycle hook I would like to understand why the following does not work and what should be done instead.</p>
  
  <p>The problem is that the mutated local data doesn't update whenever the component consumer changes the property <code>cellContent</code>. The parent owns cellContent so using the property directly is a no-no (Vue seems to agree).</p>
  
  <pre><code>&lt;template&gt;
    &lt;textarea
      v-model="mutableCellContent"
      @keyup.ctrl.enter="$emit('value-submit', mutableCellContent)"
      @keyup.esc="$emit('cancel')"&gt;
    &lt;/textarea&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    name: 'CellEditor',
    props: ['cellContent', 'cellId'],
    data () {
      return {
        mutableCellContent: this.cellContent
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style&gt;
  ...
  &lt;/style&gt;
  </code></pre>