I have one add button, on clicking that button one dropdown should add automatically, and then if I click it again it should again add that dropdown. When one dropdown is added I chose one option from available options and then I clicked the add button again to add one more dropdown below it, the dropdown gets added but it is added with the option that I chose for the first dropdown.

Code: HTML:

<div>
     <button class="button btn-primary" @click="addRow">Add row
     </button>
</div>

<div class="form-group row" v-for="(row,index) in addRowArr">
     <div class="col-md-3">
     <label>DropDown: </label>
     <b-input-group left="<i class='fa fa-location-arrow'></i>">
     <basic-select :options="SupplyChainArray" :selected-option="SupplyChaindata"
                    @select="SupplyChainobject" v-model="SupplyChain" name="SupplyChain"
                    id="SupplyChain" placeholder="Select SupplyChain">
     </basic-select>
     </b-input-group>
     </div>
</div>

Javascript:

export default{
data(){
  return(){
      addRowArr : [],
      SupplyChainArray : [{value:1, text:"B2C_HEAVIES"},
                          {value:2, text:"second"},
                          {value:3, text:"third"}],
      SupplyChaindata: {},
      SupplyChain: '',
       }
     },
methods:{
    addRow(){
      this.addRowArr.push({})
    },
    SupplyChainobject(obj) {
        this.SupplyChaindata = obj;
        this.SupplyChain = obj.value;
    },

}
}

For reference please view the attached image :