Within a Laravel view, there is a component where the data in the select tag sometimes doesn't show up. It's quite strange as it randomly displays the data and other times it doesn't. There are no errors being logged in the console or the view. Here is the code for the component:

<template>
<div class="row">
    <div class="col-md-12 text-center" v-if="!loaded">
        <br>
        <i class="fas fa-spinner fa-2x fa-pulse"></i>
    </div>
    <div class="col-md-12" v-else>
        <div class="row">
            <div class="col-md-6" >
                <label for="subjects">{{ trans('strings.choseSubject') }}</label>
                <select name="subjects" id="subjects" class="form-control selectpicker filter-input"
                        data-live-search="true" data-style="filter-input" @change="addSubject">
                    <option value="">{{ trans('strings.choseSubject') }}</option>
                    <optgroup v-for="category in subjects" :label="category.name" :data-catID="category.id">
                        <option :value="subject.id" v-for="subject in category.subjects">{{ subject.name }}</option>
                    </optgroup>
                </select>
            </div>
            <div class="col-md-6">
                <div class="other-subject-form d-none">
                    <label for="otherSubject">{{ trans('strings.choseSubject') }}</label>
                    <input type="text" class="form-control filter-input" id="otherSubject" name="otherSubject">
                </div>
            </div>
            <div class="col-md-12">
                <br>
                <hr>
                <br>
            </div>
            <div class="col-md-12">
                <div class="btn-group mb-2" v-for="subject in user_subjects">
                    <button type="button" class="btn btn-danger" :data-subjectID="subject.id" @click="deleteSubject" style="font-weight: bold">X</button>
                    <button type="button" class="btn btn-blue" disabled style="opacity: 1 !important;">{{ subject.name }}</button>
                    &nbsp;
                    &nbsp;
                </div>
            </div>
        </div>
    </div>
</div>

Description of how the component functions:

  <script>
export default {
    data() {
        return {
            loaded: false,
            subjects: [],
            user_subjects: []
        }
    },
    methods: {
        getSubjects: function () {
            axios.get('/t/get/subjects').then(function (response) {
                console.log(response);
                response.data.categories.map((value) => {
                    const category = {
                        id: value.id,
                        name: value.name,
                        subjects: value.subjects
                    };
                this.subjects.push(category);
                });
            }.bind(this));
            this.loaded = true;
        },
        getUserSubjects: function () {
            axios.get('/t/get/teacher/subjects').then(function (response) {
                this.user_subjects = [];
                response.data.subjects.map((value) => {
                    const subject = {
                        id: value.id,
                        real_id: value.subject.id,
                        name: value.subject.name
                    };
                $('#subjects').find('option[value="'+value.subject.id+'"]').remove();
                this.user_subjects.push(subject);
                });
                $("#subjects").selectpicker("refresh");
            }.bind(this));
            this.loaded = true;
        },
        addSubject: function (e) {
            var id = e.target.value;
            if(this.user_subjects.length<10)
            {
            axios.post('/t/subject/add', {
                subject_id: id,
            }).then(function (response) {
                this.getUserSubjects();
            }.bind(this));
        }
        else
        alert("You reached your maximum subjects! You can delete the subjects you don't need by pressing on the X button beside each subject");
        },
        deleteSubject: function (e) {
            var id = e.target.getAttribute('data-subjectID');

            axios.post('/t/subject/delete', {
                subject_id: id,
            }).then(function (response) {
                // var alasql = require('alasql');
                // this.user_subjects = alasql('DELETE FROM ? WHERE `id` = '+ id , [this.user_subjects]);
                this.user_subjects = this.user_subjects.filter(function (obj){
                    return obj.id != id
                });


                $('#subjects optgroup[data-catID="'+response.data.category_id+'"]').append($('<option>', {value:response.data.id, text: $('html').attr('lang') === 'ar' ? response.data.name_ar : response.data.name}));
                $("#subjects").selectpicker("refresh");
            }.bind(this));
        }
    },
    computed: {},
    created() {
        Vue.prototype.trans = string => _.get(window.i18n, string);
        console.log(this.subject);
        this.getSubjects();
        this.getUserSubjects();
        if(this.subjects == null){
            this.$forceUpdate();
        }
    }
}

In the blade view, the component is included like this :

<br>
                    <subjects-selector></subjects-selector>
                    <br> <br>

Any insights into why this peculiar behavior is occurring? The rendering seems inconsistent with a 50/50 chance...