I Need Help Migrating To the Latest Vuetity

App.vue

<template>
    <v-app dark toolbar>
        <template v-if="!$route.meta.public">
            <v-navigation-drawer fixed clipped v-model="drawer" app>
                <template v-for="item in menu">
                    <h3 class="ml-3 mt-3">{{item.title}}</h3>
                    <v-divider></v-divider>
                    <v-list>
                        <v-list-tile v-for="(link, i) in item.links" :key="i" @click="$router.push(link.href)">
                            <v-list-tile-action>
                                <v-icon color="primary" v-html="link.icon"></v-icon>
                            </v-list-tile-action>
                            <v-list-tile-content>
                                <v-list-tile-title class="links">
                                    <span>{{link.title}}</span>
                                </v-list-tile-title>
                            </v-list-tile-content>
                        </v-list-tile>
                    </v-list>
                </template>
            </v-navigation-drawer>
            <v-toolbar fixed app clipped-left>
                <v-toolbar-side-icon @click.stop="drawer = !drawer"></v-toolbar-side-icon>
                <v-toolbar-title v-text="app_name" class="title site-title"></v-toolbar-title>
                <v-spacer/>
                <v-menu bottom offset-y>
                    <v-btn flat slot="activator">Menu</v-btn>
                    <v-list>
                        <v-list-tile @click="logout">
                            <v-list-tile-title>Log Out</v-list-tile-title>
                        </v-list-tile>
                    </v-list>
                </v-menu>
            </v-toolbar>
        </template>
        <v-content>
            <v-container fluid>
                <v-slide-y-transition mode="out-in">
                    <router-view v-cloak></router-view>
                </v-slide-y-transition>
                <messenger></messenger>
            </v-container>
        </v-content>
        <v-footer app v-if="!$route.meta.public" class="px-2">
            <span>{{ app_name }} &copy; {{year}}</span>
            <v-spacer></v-spacer>
            <span class="caption">Beta v1.00</span>
        </v-footer>
    </v-app>
</template>

<script>
    import {mapGetters} from 'vuex';

    export default {
      data () {
        return {
          drawer: true,
          menu: [
            {
              title: 'Quick Links',
              links: [
                {
                  icon: 'dashboard',
                  title: 'Dashboard',
                  href: '/'
                }
              ]
            },
            {
              title: 'Assets',
              links: [
                {
                  icon: 'domain',
                  title: 'Distribution',
                  href: '/'
                },
                {
                  icon: 'view_list',
                  title: 'Inventory',
                  href: '/inventory'
                }
              ]
            },
            {
              title: 'Logistics',
              links: [
                {
                  icon: 'mdi-road-variant',
                  title: 'Drivers',
                  href: '/'
                }
              ]
            },
            {
              title: 'Marketing',
              links: [
                {
                  icon: 'mdi-book-open-page-variant',
                  title: 'Blog',
                  href: '/'
                },
                {
                  icon: 'mdi-contact-mail',
                  title: 'Newsletter',
                  href: '/'
                }
              ]
            },
            {
              title: 'Accounting',
              links: [
                {
                  icon: 'mdi-cart',
                  title: 'Orders',
                  href: '/'
                }
              ]
            },
            {
              title: 'Settings',
              links: [
                {
                  icon: 'settings',
                  title: 'General',
                  href: '/'
                },
                {
                  icon: 'mdi-shape-outline',
                  title: 'e-Commerce',
                  href: '/'
                }
              ]
            },
            {
              title: 'Support',
              links: [
                {
                  icon: 'mdi-phone-incoming',
                  title: 'Tickets',
                  href: '/'
                }
              ]
            }
          ]
        };
      },
      computed: {
        year: () => new Date().getFullYear(),
        ...mapGetters(['app_name'])
      },
      methods: {
        logout () {
          this.$auth.destroyToken();
          this.$router.push('/login');
        }
      }
    };
</script>

css.css

::-webkit-scrollbar {
    display: none;
}

html, body {
    background-color: #fff;
    color: #636b6f;
    font-family: 'Raleway', sans-serif;
    /*font-weight: 100;
    height: 100vh;
    margin: 0;*/
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Raleway', sans-serif;
    font-weight: 200;
}

.site-title {
    font-family: 'Lobster', cursive;
}

.links > a, .links > span {
    /*color: #42b983;*/
    padding: 0 25px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1rem;
    text-decoration: none;
    text-transform: uppercase;
}

.v-input-group__input {
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
}

.v-input-group--text-field-box > div > input {
    background: transparent;
}

button.v-primary {
    background-color: #000000 !important;
}

Login.vue

<template>
    <v-layout align-center justify-center>
        <v-flex md6>
            <v-card id="login">
                <v-img src="admin_static/img/city-at-night.jpg" height="200px"/>
                <v-card-title primary-title>
                    <div>
                        <h3 class="headline">{{ app_name }} Administration</h3>
                        <span class="subheader">Please log-in to continue.</span>
                    </div>
                </v-card-title>
                <v-card-text>
                    <v-form v-model="valid" ref="form">
                        <v-text-field
                                @keyup.enter="login"
                                v-model="username"
                                box
                                label="E-mail Address"
                                :rules="[$rules.required, $rules.email]"
                        ></v-text-field>
                        <v-text-field
                                @keyup.enter="login"
                                v-model="password"
                                box
                                label="Password"
                                type="password"
                                :rules="[$rules.required]"
                        ></v-text-field>
                    </v-form>
                </v-card-text>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="primary" @click.native="login" :disabled="!valid">Submit</v-btn>
                </v-card-actions>
            </v-card>
        </v-flex>
    </v-layout>
</template>
<script>
    import {mapGetters} from 'vuex';

    export default {
      name: 'login',
      data () {
        return {
          valid: false,
          username: String(),
          password: String()
        };
      },
      methods: {
        login: _.throttle(function () {
          if (!this.$refs.form.validate()) {
            return;
          }
          const data = new FormData();
          data.append('client_id', this.$configuration.client_id);
          data.append('client_secret', this.$configuration.client_secret);
          data.append('grant_type', 'password');
          data.append('username', this.username);
          data.append('password', this.password);
          data.append('scope', '');

          this.$axios
                    .post('/oauth/token', data)
                    .then(r => {
                      this.$auth.setToken(r.access_token, r.expires_in);
                      this.$router.push('/');
                    })
                    .catch(e => {
                      console.log(e);
                      this.$store.dispatch('messenger_broadcast', [
                        'error',
                        'Unauthorized.'
                      ]);
                    });
        }, 1000)
      },
      computed: {
        ...mapGetters(['app_name'])
      }
    };
</script>
<style scoped>
    #login {
        border-radius: 5px;
    }
</style>