title: How to create a multiple options from a single data coming from the API for displaying it as a select/dropdown in VueJS
body: <p>I am trying to display the select drop down using vs-select, the options are taken from the API. Here is my scenario I have made all my components dynamic, i have 3 cards in my front page, if I click any of the card respective contents are displayed.</p>
  <p>Here is the response that I get from the <code>/my-project</code> endpoint:</p>
  <pre class="lang-json prettyprint-override"><code>    [
            {
              &quot;uid&quot;: 1,
              &quot;choice&quot;: &quot;project_title1|project_title2|project_title3&quot;,
              &quot;age&quot;: &quot;35&quot;,
              &quot;country&quot;: &quot;india&quot;
            },
            {
              &quot;uid&quot;: 2,
              &quot;choice&quot;: &quot;project_title2&quot;,
              &quot;age&quot;: &quot;25&quot;,
              &quot;country&quot;: &quot;australia&quot;
            } 
            ...
      ]
  </code></pre>
  <p>Here is my code:</p>
  <pre class="lang-html prettyprint-override"><code>        &lt;span v-if=&quot;out.choice&quot;&gt;
              &lt;template  v-for=&quot;(val, e) in Myfilter(out.choice)&quot;&gt;
                  &lt;vs-select v-model=&quot;check&quot; :key=&quot;e&quot; :options=&quot;[{label: val}]&quot; /&gt;
              &lt;/template&gt;
          &lt;/span&gt;
          &lt;div v-if=&quot;out.choice === 'project_title1'&quot;&gt;     
             --show contents1--
          &lt;/div&gt;
          &lt;div v-if=&quot;out.choice === 'project_title2'&quot;&gt;
             --show contents2--
          &lt;/div&gt;
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>    check: null,
      out: null
      // ...
      methods: {
        Myfilter (val){
        return val.replaceAll('_', ' ').split('|')
      },
        SelectVue (id) {
            this.$http.get(`/my-project/${id}`)
              .then((res) =&gt; {this.out= res.data})
          }
        },
      mounted (){
        this.SelectVue (this.$route.params.uid)
      }
  </code></pre>
  <p>If the user clicks on 2nd card he will get the details of <code>uid=2</code> i.e in vue-select he will get the option as <code>project title2</code>.
  If the user clicks on 1st card he will get the details of uid=1 then three vue-select are displayed as shown in image:</p>
  <p><a href="https://i.stack.imgur.com/rSRKA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/rSRKA.png" alt="enter image description here" /></a></p>
  <p>Rather i want a single vue-select and three different options in it as:</p>
  <p><a href="https://i.stack.imgur.com/H07OG.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H07OG.png" alt="enter image description here" /></a></p>
  <p>Here is my question: How do i have a single vue-select for the data coming from API and then display different options for it.</p>