title: Modifying object's property results in read-only error
body: <p>I have this problem: I'm trying to modify one of the object's properties with the value from the input form (<code>&lt;el-input&gt;</code> in the example). Our company stack utilizes VueJs + TS + ElementUI. Unfortunately, it seems that objects' properties cannot be reactive and are in read-only mode. How can I make object properties reactive?</p>
  
  <p>HTML/CSS</p>
  
  <pre><code>&lt;el-input v-model="group.groupDescription" type="textarea"&gt;&lt;/el-input&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>interface ViewGroupResult {
    id: string;
    groupDescription: string;
  }
  
  import Vue from 'vue';
  import {Component, Watch} from 'vue-property-decorator';
  @Component
  apollo: {
  
    group: {
      query() {
            group(groupId: $groupIdOrSlug) { ... }
          }
      },
      variables() {
        groupId: this.id
      },
      fetchPolicy: 'network-only',
      loadingKey: 'groupLoading'
    },
  
  export default class ViewGroupPage extends Vue implements 
      group: ViewGroupResult | null = null;
  </code></pre>
  
  <p>When I try to type something in the text area above, the value is never updated for the group object's property <code>group.groupDescription</code> even though it's bound with <code>v-model</code> directive.</p>
  
  <p><code>Error in event handler for "input": "TypeError: Cannot assign to read only property 'groupDescription' of object '#&lt;Object&gt;'"</code></p>
  
  <p>Do I misunderstand the way getters/setters are bound to data properties in VueJs, or is this a TypeScript specific problem? Thanks in advance!</p>