I encountered an issue when trying to assign data from a function. The error appears in the console ((in promise) TypeError: Cannot read property '0'), but the data still shows on my application.

Here is the code:

<template>
                    <div class="row">
                        <div class="col-lg-12 bg-white" style="height: 100vh; overflow: scroll;">
                            <div class="wrap-content">
                                <h5 class="py-3 text-primary">QS</h5>

                                <div class="hero text-white px-3 py-4 mb-5">
                                    <p class="font-weight-300 font-12">Jumat, 23 April 2021 / 6 Syawal 1438</p>
                                    <h4>{{ jadwal_belum_terlewat[0].time }} WIB</h4>
                                    <p class="font-weight-300 font-14">Next prayer time</p>

                                    <p class="font-weight-300 font-12 mb-0"><i class="fas fa-map-marker-alt"></i> {{ this.address }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </template>

                <script>
                    // import moment from 'moment'
                    import Alert from '../components/Alert'

                    export default {
                        name: 'PrayerSchedule',
                        components: {
                            Alert
                        },
                        data() {
                            return {
                                error_flag: false,
                                error_message: '',
                                lat: '',
                                long: '',
                                jadwal_belum_terlewat : null,
                                jadwal: [
                                    {
                                        name: 'FAJR',
                                        time: ''
                                    },
                                    {
                                        name: 'DHUHR',
                                        time: ''
                                    },
                                    {
                                        name: 'ASR',
                                        time: ''
                                    },
                                    {
                                        name: 'MAGHRIB',
                                        time: ''
                                    },
                                    {
                                        name: 'ISHA',
                                        time: ''
                                    }
                                ],
                                address: ''
                            }
                        },
                        methods: {
                            async getUserCoordinates() {
                                const check_permissions = await navigator.permissions.query({ name: 'geolocation' });
                                
                                if(check_permissions.state == 'granted') {
                                    this.error_flag = false;
                                    this.error_message = "";

                                    if (navigator.geolocation) {
                                        navigator.geolocation.getCurrentPosition(this.showPosition)

                                        this.error_flag = false;
                                        this.error_message = "";
                                    } else { 
                                        this.error_flag = true;
                                        this.error_message = "Your device does not support GPS";
                                    }
                                } else {
                                    this.error_flag = true;
                                    this.error_message = "Please enable GPS first";
                                }
                            },
                            showPosition(position) {
                                this.lat = position.coords.latitude;
                                this.long = position.coords.longitude;

                                this.getPrayerDetail();
                            },
                            async getPrayerDetail() {
                                const res = await fetch(`https://api.pray.zone/v2/times/today.json?latitude=${this.lat}&longitude=${this.long}`)

                                if(res.ok) {
                                    const data = await res.json();

                                    this.jadwal[0].time = data.results.datetime[0].times.Fajr;
                                    this.jadwal[1].time = data.results.datetime[0].times.Dhuhr;
                                    this.jadwal[2].time = data.results.datetime[0].times.Asr;
                                    this.jadwal[3].time = data.results.datetime[0].times.Maghrib;
                                    this.jadwal[4].time = data.results.datetime[0].times.Isha;

                                    this.jadwal_belum_terlewat = this.jadwal.filter((data) => new Date() < data.time);
                                }
                            },
                        },
                        created() {
                            this.getUserCoordinates()
                        }
                    }
                </script>

I am looking to populate the data for jadwal_belum_terlewat using this.jadwal.filter((data) => new Date() < data.time)

Your assistance in resolving this issue would be greatly appreciated. Thank you