title: Vue and TypeScript not reactive for string array values
body: <p>I have a simple UI where the user can define 1:n mappings for form fields. The model is very simple:</p>
  
  <pre><code>export interface IMapping {
      pdfName: string;
      fieldNames: string[];
  }
  </code></pre>
  
  <p>The problem is, changes to <code>fieldNames</code> is not reactive. Here is my code for the form which should work for editing and adding a new mapping.</p>
  
  <p><strong>Template:</strong></p>
  
  <pre><code>&lt;form @submit.prevent&gt;
      &lt;div class="field"&gt;
          &lt;label for="pdfName"&gt;PDF Field Name&lt;/label&gt;
          &lt;input type="text" name="pdfName" id="pdfName" required
              v-model="data.pdfName"/&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;fieldset v-for="(fieldName, index) in data.fieldNames" :key="index"&gt;
              &lt;legend&gt;Form Field&lt;/legend&gt;
              &lt;div class="field"&gt;
                  &lt;label :for="'name_' + index"&gt;Name&lt;/label&gt;
                  &lt;input type="text" name="name" :id="'name_' + index" required
                      v-model="fieldName"/&gt;
              &lt;/div&gt;
              &lt;button @click="removeField(index)" class="removeField"&gt;&lt;i class="fas fa-minus"&gt;&lt;/i&gt;&lt;/button&gt;
          &lt;/fieldset&gt;
          &lt;button @click="addField"&gt;&lt;i class="fas fa-plus"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class="buttonrow"&gt;
          &lt;button @click="save"&gt;Save&lt;/button&gt;
          &lt;button @click="cancel"&gt;Cancel&lt;/button&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p><strong>TypeScript component</strong></p>
  
  <pre><code>import { Component, Emit, Prop, Vue, Watch } from 'vue-property-decorator';
  
  import { IMapping } from '@/models/IMapping';
  
  @Component
  export default class MappingForm extends Vue {
  
      public data: IMapping | null = null;
  
      @Prop({type: Object})
      private mapping!: IMapping;
  
      public created() {
          this.data = {...this.mapping};
      }
  
      public addField() {
          this.data!.fieldNames.push('');
      }
  
      public removeField(index: number) {
          this.data!.fieldNames.splice(index, 1);
      }
  
      @Emit('mapping-changed')
      public save() {
          if (this.mapping === null) {
              return this.data;
          } else {
              Object.assign(this.mapping, this.data);
              return this.mapping;
          }
      }
  
      @Emit('mapping-unchanged')
      public cancel() {}
  
  }
  </code></pre>
  
  <p>I copy the prop to a local variable so I can easily undo any changes and only apply them with save. It reacts to the push and the splice but the string values are not updated.
  I tried to use <code>@Watch</code> but I am not sure on how to use it in this case as I don't have a method to listen to, but only the user input on my 
  <code>&lt;input type="text" name="name" :id="'name_' + index" required v-model="fieldName"/&gt;</code></p>