How can I prevent that Chromes autofill messes up my vuetify login form?

Question

I have created a login form with vuetify (v. 2.3.2). Username and password have been stored in the Chrome browser. When I load the page the values are added to the form but the component does not seem to recognise this. This results in Label and content to be present at the same position at the same time as you can see in the image. Username is correct at first because it has autofocus. If I click outside the browser, the username field is messed up as well. If I click anywhere on the page, everything becomes alright.

Here is my code:

<template>

    <div class='signin__container mt-15'>

        <v-avatar size='60'
                  class='avatar'
                  color='#0AC7FF'>
            <v-icon dark
                    x-large>mdi-account</v-icon>
        </v-avatar>

        <v-card style='width: 340px; margin-left: auto; margin-right: auto'
                outlined>
            <div class='pt-15 text-h5 grey--text text--darken-2'>Anmeldung</div>
            <v-card-text>
                <form @submit.prevent='onLogin'
                      @reset.prevent='onReset'
                      v-if='show'>
                    <v-text-field name='username'
                                  label='Benutzername'
                                  ref='username'
                                  autofocus
                                  v-model='user.username'
                                  :disabled='loading'
                                  required>

                    </v-text-field>
                    <v-text-field name='password'
                                  label='Passwort'
                                  id='password'
                                  ref='password'
                                  v-model='user.password'
                                  type='password'
                                  :disabled='loading'
                                  required>

                    </v-text-field>
                    <v-btn type='submit'
                           block
                           class='mt-2 mb-1'
                           color='primary'
                           :disabled='loading'
                           :loading='loading'>
                        Anmelden
                    </v-btn>
                </form>
            </v-card-text>
        </v-card>
    </div>

</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import ErrorHandler from '@/ErrorHandler'

export default {
    data() {
        return {
            user: {
                username: null,
                password: null
            },
            show: true
        }
    },

    computed: {
        ...mapGetters( 'auth', ['token', 'loading'] )
    },

    methods: {
        ...mapActions( ['showMessage'] ),

        ...mapActions( 'auth', ['signIn', 'signOut'] ),

        async onLogin( ev ) {
            try {
                await this.signIn( this.user )

                this.$emit( 'signedIn' )

            } catch ( error ) {
                ErrorHandler.error( error, '' )
            }
        },

        onReset( ev ) {
            ev.preventDefault()
            // reset our form values
            this.user = {
                username: null,
                password: null
            }
            // trick to reset/clear native browser form validation state
            this.show = false
            this.$nextTick( () => {
                this.show = true
            } )
        },

        focus() {
            this.$refs.username.focus()
        }
    }
}
</script>

<style lang="scss" scoped>
.signin__container {
    position: relative;
    text-align: center;

    .avatar {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 50;
    }
}
</style>

This problem occurs only in Chrome. Does anybody know how to get rid of this annoying behavior? Maybe "the click into the page" is a solution but if i emulate this by sending a click event to another component the problem still occurs?

Edit: Disabling Chrome Autofill is not what i want. I want the component to behave correctly. The solution in the comment by @dreamwalker does just that.