title: Populate multiple select menu and options in vue using v-for
body: <p>I am trying to create multi-select questions in vue using v-for.</p>
  <p>The Select menu and the options are populated through JSON.</p>
  <p>I am not able to fetch the results of the selection as expected.</p>
  <p>While I select the options, I am unable to persist the values data.</p>
  <p>for eg:
  while I select any option from the 2nd menu, the selection in the 1st menu is cleared. Vice-versa for 1st menu.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>new Vue({
    el: "#app",
    data: {
      selectedValue: [],
      checklists: [
        {
     "id":1,
     "heading":"Environment",
     "deleted_at":null,
     "created_at":null,
     "updated_at":"2020-08-08T13:24:22.000000Z",
     "checklist_value":[
        {
           "id":1,
           "checklists_id":1,
           "values":"Indoor",
           "notes":null,
           "deleted_at":null,
           "created_at":"2020-08-08T13:03:50.000000Z",
           "updated_at":"2020-08-08T13:03:50.000000Z"
        },
        {
           "id":2,
           "checklists_id":1,
           "values":"Outdoor",
           "notes":null,
           "deleted_at":null,
           "created_at":"2020-08-08T13:13:27.000000Z",
           "updated_at":"2020-08-08T13:13:27.000000Z"
        }
     ]
  },
  {
     "id":2,
     "heading":"Location of Camera's",
     "deleted_at":null,
     "created_at":"2020-08-08T11:41:31.000000Z",
     "updated_at":"2020-08-08T13:27:59.000000Z",
     "checklist_value":[
        {
           "id":3,
           "checklists_id":2,
           "values":"Parking",
           "notes":null,
           "deleted_at":null,
           "created_at":"2020-08-08T13:28:45.000000Z",
           "updated_at":"2020-08-08T13:28:45.000000Z"
        },
        {
           "id":4,
           "checklists_id":2,
           "values":"Balcony",
           "notes":null,
           "deleted_at":null,
           "created_at":"2020-08-08T13:28:53.000000Z",
           "updated_at":"2020-08-08T13:28:53.000000Z"
        }
     ]
  }
  
      ]
    },
    
  
    methods: {
      getSelectedID(event) {
        console.log(this.selectedValue);
      }
    }
    
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"&gt;&lt;/script&gt;
  
  &lt;div id="app"&gt;
    &lt;div class="input-field col s12" v-for="(checklist, index) in checklists"&gt;
      &lt;select v-model="selectedValue" @change="getSelectedID($event)" multiple="multiple"&gt;
        &lt;option disabled&gt;Choose options&lt;/option&gt;
        &lt;option v-for="(value,index) in checklist.checklist_value" :value="value.id"&gt;{{value.values}}&lt;/option&gt;
      &lt;/select&gt;
      &lt;label&gt;{{checklist.heading}}&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"&gt;&lt;/script&gt;
  &lt;script&gt;
    $(document).ready(function() {
      $('select').formSelect();
    });
  
  &lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Expecting that v-model should create a new object for the select menu and map the options as an array so that I could pass it to the database and save them.</p>
  <p>I would appreciate if you could brief me where I was wrong.</p>
  <p>fiddle: <a href="https://jsfiddle.net/dvwkz15c/" rel="nofollow noreferrer">https://jsfiddle.net/dvwkz15c/</a></p>