vue.js(vue router)でパスは変わるが画面遷移ができない

2/17追記(router-viewとrouter.jsの修正)

###環境、ファイル構成
ruby on rails 6
vue.js
vue-router
axios

app
・javascript
・・login.vue
・・Users.vue
・・routes
・・・login_router.js
・・packs
・・・login.js
###やりたいこと
ログイン画面(login.vue)からログインして成功(200が返される)したら、router.pushを用いてUsers.vueという画面に遷移し表示を行いたい。(vue-routerを用いたSPAを想定してます)

###問題
ログイン成功後router.pushによりusers.vueを呼び出しているのは確認できる(users.vueのscript書いてあるgetメソッド呼び出される)が、画面が切り替わらずログイン画面のままでrouter-viewタグを記載しているがusers.vueのviewが描画されない。
またurlが少し変化するのみで画面の遷移はされない。
http://localhost:3000/api/v1/auth/sign_in#/　=> http://localhost:3000/users

該当のソースコード

//login_lougter.js
import Vue from "vue";
import Router from "vue-router";
Vue.use(Router);
import users from "../Users.vue";


const router = new Router([
  {
    path: "/users",
    name: "User",
    component: users,
  }
]);

const route = new Router({
  routes: route,
  base: process.env.BASE_URL,
  mode: 'history'
});

export default route;

<!-- login.vue -->
<template>
    <div>
        <div id="login">
            <el-form>
                <el-form-item label="メールアドレス" prop="email">
                    <el-input id="email" type="email" v-model="email" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="パスワード" prop="password">
                    <el-input id="password" type="password" v-model="password" autocomplete="off"></el-input>
                </el-form-item>
                <el-button type="primary" @click="onSubmit" >ログイン</el-button>
            </el-form>
　　　　　　　<router-view/> ⭐️追記
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import router from './router/login_router.js';
export default{
    data: function() {        
        return{
　　　　　　/* 省略　*/
        }
    },
    methods: {
        onSubmit: function() {
            axios
                .post("http://localhost:3000/api/v1/auth/sign_in", {
                email: this.email,
                password: this.password,
                })
                .then((response) => {
                  ⭐️ router.push('/users');⭐️/*ここで画面遷移を行いたい*/
                })
                .catch(error => {
                    alert(error);
                })
        }
    }
}
</script>

//users.vue
<template>
  <div id="users">
      users
  </div>
</template>

<script>
import axios from 'axios';
export default {
  name: "users",
  data: function() {        
    return{
      users: "",
    }
  },
  methods:{
    async getAccountData() {
      ⭐️ axios
        .get('http://localhost:3000/api/v1/users');　 /* このメソッドは呼び出せているがhtmlが描画されない*/⭐️
    }
  },
  async mounted(){
    this.getAccountData();
  },
}
</script>

とりあえずログインフォームから、Users.vueに記載されているようにusersという文字列が表示されたら個人的に成功なのですが
users.vueのスクリプトは呼び出しているが画面が切り替わらず、そのままな理由がわかりません。
users.vueの画面( html)を表示するにあたり、何か記載が足らない箇所があるのでしょうか？
追記修正依頼は随時承っております。
お手数をおかけしますが、よろしくおお願いします。