Vue3 with vuetify alpha - vue.js

Question

I am trying to install the latest version of Vuetify 3 with Vue 3 but I am getting an error at run time. I am upgrading from Vue2 to Vue3. It doesn't appear I am integrating Vuetify correctly. I have spent all labor day trying to figure this one out.
Uncaught TypeError: Cannot read properties of undefined (reading 'lgAndUp')
It's coming from my Vue component:
<template>
<div
:class="{
'mx-5 px-5 pt-5': $vuetify.breakpoint.lgAndUp,
'py-5 my-3 px-0': $vuetify.breakpoint.mdAndDown
}"
id="login_router_wrapper"
>
<router-view id="login_router"></router-view>
</div>
</template>
<script>
import { mapState, mapActions, mapMutations } from 'vuex';
export default {
props: ['errors'],
data() {
return {};
},
async created() {},
destroyed() {},
computed: {},
methods: {}
};
</script>
<style></style>
My main login_app.js
import 'material-design-icons-iconfont/dist/material-design-icons.css';
import 'vuetify/styles' // Global CSS has to be imported
import { createApp } from 'vue';
import store_login from './store/index-login.js';
import router from './router/index-login.js';
import my_vuetify from './vuetify.js';
import AuthRouter from './components/auth/AuthRouter.vue';
import AuthEntrypoint from './components/auth/AuthEntrypoint.vue';
const login_app = createApp({
data() {
return {
message: 'Hello root Component 1'
};
},
components: {
'auth-router': AuthRouter,
'auth-entrypoint': AuthEntrypoint,
},
});
login_app.use(store_login)
.use(router)
.use(my_vuetify)
.mount('#app-login');
My store
import {createStore} from 'vuex';
import auth from './auth/auth.js';
import loader from './util/loader.js';
import error from './util/error.js';
const store_login = createStore({
modules: {
auth,
loader,
error
},
state: {
errors: []
},
mutations: {},
getters: {},
actions: {}
});
export default store_login;
My router
import { createRouter, createWebHistory } from 'vue-router';
import auth from './auth.js';
import AuthRouter from '../components/auth/AuthRouter.vue';
import authResetPassword from './authResetPassword.js';
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/login',
props: true,
component: AuthRouter,
children: [...auth]
},
{
path: '/password',
props: true,
component: AuthRouter,
children: [...authResetPassword]
}
]
});
export default router;
Then Vuetify
import {createVuetify} from 'vuetify';
import 'vuetify/styles' // Global CSS has to be imported
const my_vuetify = createVuetify({
iconfont: 'mdi', // 'md' || 'mdi' || 'fa' || 'fa4'
theme: {
options: {
customProperties: true
},
light: true,
themes: {
light: {
primary: '#9E9E9E',
secondary: '#b0bec5',
accent: '#8c9eff',
error: '#b71c1c',
background: '#fafafa'
}
}
}
});
export default my_vuetify;