title: How to dynamically have label based on resource type for vue-multiselect
body: <p>i have a requirement where <code>autocomplete</code> comes from backend and it will have key called <code>filedId</code> based on that i want to show the label</p>
  <p>if we click on <strong>dynamic resource 1</strong> btn  the label should be <code>city</code></p>
  <p>if we click on <strong>dynamic resource 2</strong> btn  the label should be <code>pinCode</code></p>
  <p>if we click on <strong>dynamic resource 3</strong> btn  the label should be <code>countryCode</code></p>
  <p><strong>Note:</strong> i don't want to change the <code>data structure</code> / <code>json</code></p>
  <p>here is what i have tried</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>var app = new Vue({
    el: '#app',
    components: { Multiselect: window.VueMultiselect.default },
    data () {
      return {
        value: [],
        options: [],
        infoData:{},
      }
    },
    methods:{
      dr1(){
        let infoObj = {
          resource:{
            autocomplete:{
              fieldId:'city',
            },
            data:[{
               id:1,
               city:'Bengaluru'
             }],
          }
        }
        this.infoData = infoObj;
        this.options = infoObj.resource.data;
      },
      dr2(){
         let infoObj = {
          resource:{
            autocomplete:{
              fieldId:'pinCode',
            },
            data:[{
               id:1,
               pinCode:'560097'
             }],
          }
        }
        this.infoData = infoObj;
        this.options = infoObj.resource.data;
      },
      dr3(){
         let infoObj = {
          resource:{
            autocomplete:{
              fieldId:'countryCode',
            },
            data:[{
               id:1,
               countryCode:'+91'
             }],
          }
        }
        this.infoData = infoObj;
        this.options = infoObj.resource.data;
      },
     determineLabel(){
       let labelName = this.infoData.resource.autocomplete.fieldId;
       return labelName;
     }
    },
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body { font-family: 'Arial' }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Timeline&lt;/title&gt;
    &lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/vue-multiselect@2.1.0"&gt;&lt;/script&gt;
    &lt;link rel="stylesheet" href="https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"&gt;
    &lt;script defer src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="app"&gt;
    
    &lt;button @click="dr1()"&gt;dynamic resource 1&lt;/button&gt;
    &lt;button @click="dr2()"&gt;dynamic resource 2&lt;/button&gt;
    &lt;button @click="dr3()"&gt;dynamic resource 3&lt;/button&gt;
    &lt;br/&gt;&lt;br/&gt;
  
  &lt;div&gt;
    &lt;multiselect
       v-model="value"
       label="determineLabel"
      :options="options"
       :multiple="false"
      :taggable="false"
    &gt;&lt;/multiselect&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>here is codepen link to play with: <a href="https://codepen.io/eabangalore/pen/MWmrOBb" rel="nofollow noreferrer">https://codepen.io/eabangalore/pen/MWmrOBb</a></p>
  <p>Still i did not find solution, please help me thanks in advance</p>