title: VueJs does not track changes on @input
body: <p>Vue does not track changes on <code>customizableFormData</code> property while I change the input.</p>
  <p><a href="https://i.stack.imgur.com/sWkvo.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/sWkvo.png" alt="enter image description here" /></a></p>
  <p>Simplified source code:</p>
  <pre><code>&lt;template&gt; 
      &lt;input type=&quot;checkbox&quot; @input=&quot;setFormField(form.name, 'does_attend', $event.target.checked)&quot;&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
  
      data() {
          return {
              form: {}//it's set by AJAX on mounted event,
              customizableFormData: []
          }
      },
      methods: {
          setFormField(formName, inputName, value) {
              if(this.customizableFormData[formName] === undefined) {
                  this.customizableFormData[formName] = {};
              }
              this.customizableFormData[formName][inputName] = value;
              console.log(this.customizableFormData); // shows correct data
              this.$forceUpdate();
          }
      }
  }
  &lt;/script&gt;
  
  </code></pre>