title: VueJS access model from method
body: <p>In VueJS I am setting model data based on user actions. I want to access the model from a method to update an element.</p>
  
  <p>In the code below, when the user changes the first select list, I want to update the second select list to show the id property of the first list. As it is the upper list works OK but the lower list id property is not updated on upper list change:</p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.2.1/vue.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
          &lt;div id="editor"&gt;
              &lt;form id="query" methods="GET"&gt;
              &lt;div id="form_container" class="row"&gt;
                          &lt;div class="form-group"&gt;
                              &lt;label for="choice-selector"&gt;Choices&lt;/label&gt;
                              &lt;select class="form-control" id="choice-selector" v-model="choice_id" v-on:change="refreshOptions"&gt;
                                &lt;option v-for="item in choices" v-bind:value="item.id"&gt;
                                  {{ item.name }}
                                &lt;/option&gt;
                              &lt;/select&gt;
                              &lt;span&gt;Current choice id: {{ choice_id }}&lt;/span&gt;
                              &lt;br&gt;
                              &lt;label for="option-selector"&gt;Options&lt;/label&gt;
                              &lt;select class="form-control" id="option-selector" v-model="option_id" &gt;
                                  &lt;option v-for="item in options" v-bind:value="item.id"&gt;
                                      {{ item.name }}
                                  &lt;/option&gt;
                              &lt;/select&gt;
                              &lt;span&gt;Current option id: {{ option_id }}&lt;/span&gt;
                          &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;script&gt;
      let index = 0;
      new Vue({
          el: '#editor',
          data: {
              choice_id: '1',
              choices: [
                { id: '1', name: 'Choice A' },
                { id: '2', name: 'Choice B' },
                { id: '3', name: 'Choice C' }
              ],
              option_id: '1',
              options: [
              ]
            },
          ready: function startFetch() {
            this.refreshOptions();
          },
          methods: {
            refreshOptions: function refreshOptionList() {
              console.log("&gt;&gt;refreshOptionList() index:" + index);
              const vm = this;
              const newOptions = [{ id: index, name: 'Option based on choices list id: ' + vm.choice_id }];
              vm.$set('options', newOptions);
              index += 1;
            }
          },
        });
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any ideas?</p>