опция select2 отображается в неправильном положении

Question

Я использую select2 для раскрывающегося списка. Но это показывает в неправильном положении. Вот мой код:

<div class="form-group col-md-12">
    <div class="input-group">
        <div class="input-group-prepend">
            <span v-bind:style="{ width: prependWidth + 'px' }" class="input-group-text">Select Heading</span>
        </div>
        <select class="form-control select2" v-model="formData.heading_id" id="heading_id"
                name="heading_id" required>
            <option :key="'heading_id'" value="">Select Heading</option>
            <option v-for="(heading, index) in headings" :key="'heading_id' + index" :value="heading.id">
                training year @{{ heading.training_year }}
            </option>
        </select>
    </div>
    <label v-if="errors.heading_id" class="help-block text-danger" style="margin-top: 3px; margin-bottom: 0; padding: 0;">
        @{{ errors.heading_id[0] }}
    </label>
</div>
<script>
    $(document).ready(function () {
        $('.select2').select2();
    });
</script>