problem description

Django template dynamically generates < option > of < select >, and the front end is rendered as a bootstrap-select component; after F5 refreshes the page, there will be the same component under the bootstrap-select component.

important information

1. I also used Vue.js (for the first time, rookie level), and I don"t know if Vue caches the DOM of the bootstrap-select component. The 2.bootstrap-select component is not encapsulated by me as a Vue component.
3. < select-component > < / select-component > is the first bootstrap-select, which I encapsulated into a Vue component, and the last two unencapsulated ones give rise to this kind of weird rendering bug.

related codes

html:

    <div id="queryPanel" class="card border border-info mt-1 mb-1">
      <div id="queryHeader" class="card-header">
        <query-component hrefs="-sharpcollapseOne"></query-component>
      </div>
      <div id="collapseOne" class="collapse show" data-parent="-sharpqueryPanel">
        <div class="card-body">
            <div class="container m-0">
                <div class="row">
                    <div class="col-sm-3">
                        <div class="form-group">
                            <select-component></select-component>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <select class="form-control selectpicker" id="unit" onchange="getSquadron()">
                                {% for unit in units %}
                                <option value="{{ unit }}">{{ unit }}</option>
                                {% endfor %}
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <select class="form-control selectpicker" id="squadron">
                            </select>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group btn-group">
                            <button type="button" class="btn btn-primary" onclick="ajaxquery(this)">
                                <i class="fa fa-search" aria-hidden="true"></i> 
                            </button>
                            <button type="button" class="btn btn-primary" onclick="exportexcel(this)">
                                <i class="fa fa-file-excel-o" aria-hidden="true"></i> 
                            </button>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-sm-3">
                        <div class="form-group">
                            <pure-date-component id="datetimepicker1" inputid="starttime"></pure-date-component>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <pure-date-component id="datetimepicker2" inputid="endtime"></pure-date-component>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div class="form-group">
                            <input id="begintime" type="text" value="{{ regist_time__min }}" class="form-control" readonly />
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <div id="dbState" class="input-group">
                            <input id="updatetime" type="text" v-bind:class="["form-control", "text-dark", "bg-white", "border", expire ? "border-danger" : "border-success"]" value="{{ regist_time__max }}" v-on:change="getdbState($event)" readonly="readonly"/>
                            <div class="input-group-append">
                                <button v-bind:class="["btn", "text-white", expire ? "bg-danger" : "bg-success"]">
                                    {% verbatim %}
                                    {{ describe }}
                                    {% endverbatim %}
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </div>
    </div>

js:

function getSquadron(){
    var currentUnit = $("-sharpunit").val();
    $.ajax({
        url:"/getsquadron",
        type:"POST",
        data:{
            unit:currentUnit,
        },
        success: function (data) {
            $("-sharpupdatetime").val(data.regist_time__max);
            $("-sharpbegintime").val(data.regist_time__min);
            // jsonchange,:vuejquerychange
            var ute = document.getElementById("updatetime");
            if(ute.fireEvent) {
                ute.fireEvent("onchange");
            } else {
                ev = document.createEvent("HTMLEvents");
                ev.initEvent("change", false, true);
                ute.dispatchEvent(ev);
            }
            $("-sharpsquadron").empty();
            $("-sharpsquadron").append("<option value="" + currentUnit + "">" + currentUnit + "</option>");
            // jQuery, fordata.squadron[i]
            $.each(data.squadron, function(index, value){
                 $("-sharpsquadron").append("<option value="" + value + "">" + value + "</option>");
            });
            // Bootstrap-select
            $("-sharpsquadron").selectpicker("refresh");
            // Bootstrap-select
            $("-sharpsquadron").selectpicker("render");
        }
    });
}

py

-sharp 
def index(request):
    units = getUnits()
    -sharp key_name:regist_time__max
    updatetime = getUpdatetime(units[0])
    -sharp key_name:regist_time__min
    begintime = getBegintime(units[0])
    data = {}
    data["units"] = units
    data.update(updatetime)
    data.update(begintime)
    return render(request, "index.html", data)

difficulties encountered

the error cannot be located because it is not known whether it is a Django, Vue, or bootstrap-select problem. I would also like to ask all the gods to give us some advice. Thank you very much.