title: vue js view not updates with dynamically added v-model
body: <p>I add some dynamic data to model in vuejs mounted hook but when it is mounted first time it reactivity works and view updates but when I make changes this model view not updates.</p>
  
  <pre><code>{
      props: {
          requestall: Object,
          category_field_options: Array,
      },
      data(){
          return {
              field_options: {},
          };
      },
      mounted(){
          for(var field of this.category_field_options)
          {
              var data = [];
  
              for(var option of field.options)
              {
                  if(this.check_option_is_selected(field.id, option.id) ) // true
                  {
                      data.push(option.id);
                  }
              }
  
  
              this.field_options['field_' + field.id] = data;
  
          }
      },
      methods: {
          /**
           * Dynamic category fields options checked or unchecked.
           * 
           * @param object event
           * @param int field_id
           * @param int option_id
           */
          field_option_changed(event, field_id, option_id)
          {
              if(this.field_options['field_' + field_id].indexOf(option_id) &gt; -1){
                  var index = this.field_options['field_' + field_id].indexOf(option_id);
                  this.field_options['field_' + field_id].splice(index, 1);
              }else{
                  this.field_options['field_' + field_id].push(option_id);
              }
          },
          /**
           * @param int
           * @param int
           * 
           * @return 
           */
          check_option_is_selected(field_id, option_id)
          {
              var check = this.requestall['field_' + field_id] 
                  &amp;&amp; (this.requestall['field_' + field_id].indexOf(option_id.toString()) &gt; -1) 
                  ? true : false;
  
              return check;
          },
      }
  }
  </code></pre>
  
  <p><strong>I see changes take affect on vue chrome inspector when field_option_changed function works.
  but view end not updates after these changes.</strong> When it is mounted it works fine. 
  I am not sure maybe this happens because of javascript stored variables data types 
  (In JavaScript, a variable may store two types of data: primitive and reference)</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;span v-for="(val,key,index) in field_options" :key="'willSubmitField_' + index"&gt;
              &lt;input type="text" v-for="option in val" :key="'willSubmitField_' + index + '_' + option" 
                  :name="key + '[]'" :value="option"&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p><strong>#EDIT 1</strong></p>
  
  <p>I find a solution with having one v-model array value and only keep selected values in it.</p>
  
  <pre><code>{
      props: {
          requestall: Object,
          category_field_options: Array,
      },
      data(){
          return {
              field_options: [],
          };
      },
      mounted(){
          for(var key in this.requestall)
          {
              if(key.search(/^field_\d$/i) &gt; -1)
              {
                  for(var option of this.requestall[key]){
                      this.field_options.push(parseInt(option));
                  }
              }
          }
      },
      methods: {
          /**
           * Dynamic category fields options checked or unchecked.
           * 
           * @param object event
           * @param int option_id
           */
          field_option_changed(event, option_id)
          {
              if(this.field_options.indexOf(option_id) &gt; -1){
                  var index = this.field_options.indexOf(option_id);
                  this.field_options.splice(index, 1);
              }else{
                  this.field_options.push(option_id);
              }
          },
          /**
           * @param int
           * @param int
           * 
           * @return 
           */
          check_option_is_selected(field_id, option_id)
          {
              var check = this.field_options &amp;&amp; (this.field_options.indexOf(option_id) &gt; -1) 
              ? true : false;
  
          return check;
          },
      }
  }
  </code></pre>
  
  <p>and changes in template</p>
  
  <pre><code>&lt;template&gt;
      &lt;div&gt;
          &lt;span v-for="(field,index) in category_field_options" :key="'categoryField_' + index"&gt;
              &lt;span v-for="option in field.options" :key="'categoryField_option' + option.id"&gt;
                  &lt;input type="text" :name="'field_' + field.id + '[]'" 
                      v-if="check_option_is_selected(field.id, option.id)" 
                      :value="option.id"&gt;
              &lt;/span&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  </code></pre>