title: Vue-multiselect update field using AJAX
body: <p>Here is my Vue multiselect component:</p>
  <pre><code>    &lt;multiselect v-model=&quot;selectedcategoryitem&quot;
                                       :options=&quot;options&quot;
                                       :multiple=&quot;true&quot;
                                       :internal-search=&quot;false&quot;
                                       group-values=&quot;libs&quot;
                                       group-label=&quot;category&quot;
                                       :group-select=&quot;true&quot;
                                       placeholder=&quot;Type to search&quot;
                                       track-by=&quot;value&quot;
                                       label=&quot;name&quot;
                                       v-on:select=&quot;toggleSelected&quot;&gt;
     &lt;span slot=&quot;noResult&quot;&gt;Oops! No elements found. Consider changing the search query.&lt;/span&gt;
  &lt;/multiselect&gt;
  </code></pre>
  <p>And data and method:</p>
  <pre><code>    data: {  selectGoalID: 0
             , selectedcategoryitem: []
             , queryData: []
             , options: [
                      {
                          value: 1,
                          category: 'item1',
                          libs: [
                              { value: &quot;1_1&quot;, name: 'name1(E)' },
                              { value: &quot;1_2&quot;, name: 'name2(P)' },
                              { value: &quot;1_3&quot;, name: 'name3(T)' },
                              { value: &quot;1_4&quot;, name: 'name4(F)' },
                              { value: &quot;1_5&quot;, name: 'name5' },
                          ]
                      },
                      {
                          value: 2,
                          category: 'item2',
                          libs: [
                              { value: &quot;2_1&quot;, name: 'name1' },
                              { value: &quot;2_2&quot;, name: 'name2' }
                          ]
                      },
                      {
                          value: 3,
                          category: 'item3',
                          libs: [
                              { value: &quot;3_1&quot;, name: 'name1' },
                              { value: &quot;3_2&quot;, name: 'name2' },
                              { value: &quot;3_3&quot;, name: 'name3' },
                              { value: &quot;3_4&quot;, name: 'name4' },
                              { value: &quot;3_5&quot;, name: 'name5' },
                          ]
                      },
              }
              , methods: {
                  UpdateType: function (goal_id, selectedTypes) {
                      return $.ajax({
                          method: &quot;POST&quot;
                          , url: &quot;@Url.Action(&quot;UpdateType&quot;, &quot;Predict&quot;)&quot;
                          , data: {
                              _goal_id: goal_id,
                              _selectedTypes: selectedTypes
                          }
                          , success: function (result) {
                              if (result.code == &quot;S&quot;) {
                                  
                              }
                              else {
                                  alertResultModel(result);
                              }
                          },
                          error: function (xhr, ajaxOptions, thrownError) {
                              alertInfo(xhr.statusText);
                          }
                      });
                  }
                  
                  , toggleSelected: function (value) {
                      if (value.length &gt; 0) {
                          this.queryData = JSON.parse(JSON.stringify(value));
                      }                    
                      console.log(this.queryData);
  
                      this.UpdateType(this.selectGoalID, this.queryData).then(
                          function (result) {
                              if (result.code == &quot;S&quot;) {
                                  
                              }
                              else {
                                  alertResultModel(result);
                              }
                          }
                          , function () {
                              alertError(&quot;Error!!&quot;);
                          }
                      );
                  }
  }
  </code></pre>
  <p>And when I selected single item, console log return: null,</p>
  <p>When i selected multiple items console log return:</p>
  <pre><code>(2) [{…}, {…}, __ob__: Observer]
  0: {__ob__: Observer}
  1: {__ob__: Observer}
  length: 2
  __ob__: Observer {value: Array(2), dep: Dep, vmCount: 0}
  [[Prototype]]: Array
  </code></pre>
  <p>Question is:</p>
  <ol>
  <li>Why first selected item is null, but v-model=&quot;selectedcategoryitem&quot; selectedcategoryitem.length is 1.</li>
  <li>How to convert value to JSON format send to Backend.</li>
  </ol>