title: Mobx - how track deep changes with dynamic form inputs?
body: <p>i need it on forms.
  My form is like this in data submit:</p>
  
  <pre><code>const initial = {
      name "",
      surname: "",
      adresses: new Array()  &lt;- this give me  warning when array empty *
  }
  </code></pre>
  
  <p>my adresses is array of objects in which i have got some standard properties and i can add new one property, using extendObservable
  adresses type of {state:'',town:'' }</p>
  
  <pre><code>extendObservable(this.props.data['adresses'][i], { [keyName]: '' });
  </code></pre>
  
  <p>my problem is that doing extendObservable to add new property to adresses i do not see (observe) any change in live, but if, after doing extendObservable, i update the value of state i can see the new added property. Why i do not see the new property the time i added it to adresses?</p>
  
  <p>my store is this (typescript):</p>
  
  <pre><code>const initial = {
     namel: "",
      surname: "",
      addresses: new Array()
  }
  
  export class formStore {
      constructor() {
          this.formData = initial
      }
      @observable formData: {
          [index: string]: any,
          name: string,
          surname: string,
          addresses: any[]
      };
      @action updatePropertyForm(key: string, value: any) {
          this.formData[key] = value;
      }
  
      @action updatePropertyAddresses(key: string, value: string, i: number) {
          this.formData.addresses[i][key] = value;
      }
  
      @action initializeFormData(data: any) {
          this.formData = data;
      }
  
       @action addEmptyAddress() {
          const emptyAddress = {
              state: "",
              townl: "",
          }
          this.formData['addresses'].push(emptyAddress);
      }
  
      @action addPropertyToAddresses(_keyName: string) {
          const length = this.formData['addresses'].length;
          for (var i = 0; i &lt; length; i++) {
              let keyName = _keyName
              keyName = keyName.replace(/\s/g, '')
              keyName = toLowerChar(keyName);
              extendObservable(this.formData['addresses'][i], { [keyName]: '' });
          }
      }    
  
      @action removePropetyFromAddresses(_keyName: string) {
          const length = this.formData['addresses'].length;
              for (var i = 0; i &lt; length; i++) {
                  let keyName = _keyName
                  delete this.formData['addresses'][i][keyName];
              }
      }
  }
  </code></pre>
  
  <p>by calling add or remove i have to update one of other properties so can i see the new property i added. 
  How observe it when i put new property?</p>