Vue password input component that consumes Have I Been Pwned Password API

PasswordInput.vue

<template>
    <div>
        <input class="form-control" :class="'is-'+status" type="password" v-model="password" @change="verify">

        <div :class="status+'-feedback'" v-show="message">
            <i class="fa fa-spinner fa-spin" v-show="loading"></i>
            <span v-text="message"></span>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            password: '',
            loading: false,
            message: '',
            status: ''
        }
    },

    methods: {
        verify () {
            if (this.password === '') {
                this.clearInput()

                return
            }

            this.loading = true
            this.status = 'checking'
            this.message = 'Checking password...'

            axios.get(`https://api.pwnedpasswords.com/pwnedpassword/${this.password}`).then( ({ data }) => {
                this.clearInput()

                if (data) {
                    this.status = 'invalid'
                    this.message = `Password is compromised. Found in data breaches ${data} times.`

                    return
                }
            }).catch( err => {
                this.loading = false

                if (err.response.status === 404) {
                    this.status = 'valid'
                    this.message = 'Password was not found in any known data breaches!'

                    return
                }
            })
        },

        clearInput () {
            this.loading = false
            this.status = ''
            this.message = ''
        }
    }
}
</script>

<style lang="scss">
.is-checking {
    border-color: #0069d9 !important;
}
.checking-feedback {
    color: #0069d9 !important;
}
</style>