title: How to render elements in drop down using vselect in vue js
body: <p>I'm having a form in vue js with select drop downs, I'm trying to use <a href="https://sagalbot.github.io/vue-select/" rel="nofollow noreferrer">https://sagalbot.github.io/vue-select/</a> this library to execute this, according to the documentation I've to pass an array into this and I'm calling a axios method to get the options of the drop downs. I'm getting the data in following format:</p>
  
  <p><a href="https://i.stack.imgur.com/DUEtW.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/DUEtW.png" alt="Array of the values"></a></p>
  
  <p>And with following description: </p>
  
  <p><a href="https://i.stack.imgur.com/nbIpb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/nbIpb.png" alt="Fields of my data"></a></p>
  
  <p>I want to only show the names in the option and get values as ID of that particular row, how can I achieve this.</p>
  
  <p>My code look something like this:  <a href="https://jsfiddle.net/eemdjLex/1/" rel="nofollow noreferrer">https://jsfiddle.net/eemdjLex/1/</a></p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;v-select multiple :options="model.data"&gt;&lt;/v-select&gt;
  &lt;/div&gt;
  
  import vSelect from 'vue-select';
  
  Vue.component('v-select', vSelect)
  
  const app = new Vue({
      el: '#app'
      router: router,
      data () {
          return {
              model: {},
              columns: {},
        }
      }
      methods: {
          fetchIndexData() {
                  var vm = this;
                  axios.get('/companies').then(response =&gt; {
                  Vue.set(vm.$data, 'model', response.data.model)
                  Vue.set(vm.$data, 'columns', response.data.columns)
              }
      }
  });
  </code></pre>
  
  <p>It is not working proper but you get the idea what I'm trying to do.</p>