Using Vueitify and router How do I make vue router change components? URL is updating but component is not

I am working on getting a single page vue application working that uses vuetify and the vue router.

Everything is pointing to my routes being recognized:

1. They show up in vue tools properly, in both history and routes
2. The url and parameter are changing properly in the address bar

However, my component associated with the route is not displaying. It simply stays on my home page component. I am getting no console errors.

I feel this might be some kind of confusion in how my main app.js file is setup. I am extremely new to Vue and may not be grasping how everything works together. I have tried importing things in different places, changing route names, removing vuetify but ultimately I can't get the component to change with the route.

app.js

import Vue from 'vue'
import vuetify from './plugins/vuetify'
import router from "./router";

import myDefaultView from './Views/myDefaultView'

Vue.component('myDefaultView', myDefaultView)

Vue.config.productionTip = false

//thinking something in this bit might not be right
new Vue({
    router,
    vuetify,
    render: h => h(myDefaultView)
}).$mount('#app')

router.js

import Vue from "vue";
import Router from "vue-router";
import myDefaultView from './Views/myDefaultView'
import userPage from "./Views/userPage";

Vue.use(Router);

export default new Router({
    routes: [
        {
            path: "/",
            name: "home",
            component: myDefaultView
        },
        {
            path: "/user/:userId",
            name: "userPage",
            component: userPage

        },
    ]
});

myDefaultView.vue

//only relevant code included
<template>
        <v-main>
            <template>
                <v-data-table
                        @click:row="goToUserPage"
                        :headers="headers"
                        :items="users"
                        :items-per-page="15"
                        class="elevation-1"
                >
                </v-data-table>
            </template>
</template>

<script>
    import axios from 'axios';
    import router from "../router";

    export default {
        props: {
            source: String,
        },
        data () {
            return {
                users: [],
                headers: [
                    {
                        text: 'User Name',
                        align: 'left',
                        sortable: true,
                        value: 'user.name',
                        class: 'text-subtitle-1'
                    },
                    { text: 'Date joined', value: 'user.joined'},
                    { text: 'Points ', value: 'user.points' },
                    
                ],
            }
        },
        created () {
            this.$vuetify.theme.dark = true
        },
        mounted () {
            this.getUsers();
        },
        methods: {

            getUsers() {
                axios.get("http://local.getusers.com)
                    .then(response => {
                        this.users = response.data;
                    })
                    .catch(error => {
                        console.log(error)
                    })
            },

            goToUserPage(item,row) {
                router.push({ name: 'userPage', params: { userId: row.item.user.id } })
            }
        }

    }


</script>

userPage.vue

<template>
    <span>This vue is arbitrary, if I could just get it to display I could make it more cool</span>
</template>

<script>
    export default {
        name: "userPage"
    }
</script>

<style scoped>

</style>