Как сделать функцию асинхронной? Vue.js

У меня есть функция changeData, которую пользователь может запустить по кнопке ещё до того, как оба промиса вернут ответы. В случае этого в основную БД запишется пустой массив.

Как мне переписать код так, чтобы this.database = this.smallData срабатывал только после того, как fetch вернёт ответ?

methods: {
    changeData(how) {
        switch (how) {
            case 'small':
                this.database = this.smallData
                break
            case 'big':
                this.database = this.bigData
                break
        }
    },
    getSmallData() {
        return fetch(this.smallDataAPI)
        .then(d => d.json())
        .then(d => this.smallData = d)
    },
    getBigData() {
        return fetch(this.bigDataAPI)
        .then(d => d.json())
        .then(d => this.bigData = d)
    },
},
create() {
    this.getSmallData()
    this.getBigData()
}

Мне нужно, чтобы базы данных загружались с момента загрузки страницы, и, даже если пользователь и нажмёт кнопку, вызывающую changeData, то эта функция не срабатывала, пока нужная БД не загрузится