Bootstrap-select not working with dynamically populated options in Vuejs

I am trying to use bootstrap-select in one of my projects at first already created select option it works fine but when the options of the select are built dynamically the plugin does not work and it does not show any error too. I have included these $("#supplier_id").selectpicker("render");$("#supplier_id").selectpicker("refresh"); as proposed in different answers like https://stackoverflow.com/questions/32681437/bootstrap-select-not-working-with-dynamically-populated-options and https://stackoverflow.com/questions/26205248/jquery-bootstrap-selectpicker-refreshing-lists-based-upon-previous-list-choice and so on but still, I am not able to achieve what I want.

The HTML code in Vue file is like below

 <form novalidate @submit.prevent="getData">
     <div class="form-horizontal" v-for="(row, index) in $v.rows.$each.$iter" :key="index">
            <div class="form-group">
              <div class="col-md-3">
                <select
                  name="supplier_id1"
                  id="supplier_id"
                  class="form-control test"
                  v-model="row.supplier_id1.$model"
                  data-live-search="true"
                >
                  <option value selected>د پلورونکي ټاکنه</option>
                  <option
                    v-for="Supplier in Suppliers"
                    :key="Supplier.id"
                    :value="Supplier.id"
                  >{{ Supplier.name }}</option>
                </select>                    
            </div>
          </div>
          <button :disabled="form.busy" type="submit" class="btn btn-primary">خوندی کړی</button>
          <button
            :disabled="form.busy"
            class="btn btn-success"
            @click="[rows.push({   supplier_id1: '',date1:'',totalAmount1:'',description1:''
              }),refreshPicker()]"
          >اضافه کړی</button>
        </form>

The Script code in Vue file is like below

    export default {

  data() {
    return {
      rows: [
        {
          supplier_id1: "",
          totalAmount1: "",
          date1: "",
          description1: ""
        }
      ],
    }
    }
    ,methods: {
        refreshPicker: function() {
          $("#supplier_id").selectpicker();
          $("#supplier_id").selectpicker("render");
          $("#supplier_id").selectpicker("refresh");
          //   alert("this is also called");
        },
    getData: function() {//getDatecode }
          
    },
  created() {$("#supplier_id").selectpicker();}
}