Мои данные возвращаются случайно при каждом обновлении, и я не знаю почему

Question

Итак, я создаю приложение в Vue.js и Laravel. В настоящее время у меня закончилась функция «тикет», которая запрашивает все «дела» компании, отсортированные по срокам. Он прекрасно организован до определенного момента в моем коде.

Это мой сервис (fleshdesk.js)

class Freshdesk {

    getIssues() {
        return this.api()
    }

    async api() {

        const response = await axios.request({
            baseURL: `https://glue-customer-support.freshdesk.com/api/v2/tickets?order_by=due_by`,
            method: 'get',
            headers: {
                'Content-Type': 'application/json',
                'Authorization': 'Basic [KEY]',
            }
        });

        return response.data;
    }
}

Это мой файл Vue (в определенный момент мои данные здесь реорганизуются). Здесь я запрашиваю данные в запросе, чтобы получить определенный идентификатор и найти его в другой таблице.

data() {
    return {
        issues: [],
    };
},

mounted() {
    Freshdesk.getIssues()
        .then(response => {

            console.log(response);

            for (var i = 0; i < response.length; i++) {

                const issueData = {
                    subject: '',
                    email: '',
                    name: '',
                    company: '',
                    due: '',
                };

                issueData.subject = response[i]['subject'];

                var dueDate = new Date(response[i]['due_by']);
                const months = ["Jan", "Feb", "Mar", "Apr", "Mei", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"];

                let formatted_date = dueDate.getDate() + " " + months[dueDate.getMonth()];
                issueData.due = formatted_date;

                // THIS IS WHERE MY LIST GETS MESSED UP

                axios.request({
                    baseURL: `https://glue-customer-support.freshdesk.com/api/v2/contacts/` + response[i]['requester_id'],
                    method: 'get',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': 'Basic [KEY]',
                    },
                }).then(contactRes => {

                    issueData.name = contactRes['data']['name'];
                    issueData.email = contactRes['data']['email'];
                    this.issues.push(issueData);

                    if (contactRes['data']['company_id'] == !null) {

                        axios.request({
                            baseURL: `https://glue-customer-support.freshdesk.com/api/v2/companies/` + contactRes['data']['company_id'],
                            method: 'get',
                            headers: {
                                'Content-Type': 'application/json',
                                'Authorization': 'Basic [KEY]',
                            },
                        }).then(companyRes => {
                            issueData.company = companyRes['data']['name'];

                            this.issues.push(issueData);
                            console.log(issueData);

                        });
                    } else {
                        issueData.company = "";
                        this.issues.push(issueData);
                        console.log(issueData);
                    }
                });
            }
        })
        .catch(error => {
            console.log('There was an error:', error.response);
        });
},

и, наконец, это показано так же и в моем файле Vue:

<template>
  <tile :position="position">
    <div class="grid gap-padding h-full markup">
      <ul class="align-self-center">
        <h1>Freshdesk</h1>

        <li v-for="issue in issues">
          <div class="my-2">
            <p>{{issue['subject']}}</p>
            <p>{{issue['name']}}</p>
            <p>{{issue['email']}}</p>
            <p v-if="issue['company']!== ''">{{issue['company']}}</p>
            <p>{{issue['due']}}</p>
          </div>
        </li>
      </ul>
    </div>
  </tile>
</template>

чтобы вы могли видеть, что мои данные отображаются в шаблоне представления. Проблема в том, что каждый раз, когда я обновляю страницу, данные организуются по-разному. (например, как 16 16 16 16 14 15 16) или наоборот. Я хочу, чтобы сначала показывались данные с ближайшей датой. Что я не вижу? Что-то не так с моим форматированием аксиосов?