rails×vue×vue-routerでログイン後の遷移を行いたい

環境

ruby on rails 6 (not api mode)
vue.js
vou-router

やりたいこと

タイトル通りrails×vue×voe-routerでログイン(token認証)後の遷移を行いたいです。
serverで以下のようにルーティングを定義しています。

Rails.application.routes.draw do
  namespace :api do
    namespace :v1 do
      mount_devise_token_auth_for "User", at: "auth", controllers: {
        registrations: 'api/v1/auth/registrations',
        sessions: 'api/v1/auth/sessions'
    }
    end
  end
end

ログイン画面に関してはhttp://localhost:3000/api/v1/auth/sessions/new.html.erbで
<%= javascript_pack_tag 'log_in' %>という形でログインコンポーネントを呼び出しています。
このコンポーネント内でログイン処理が成功したら、users.vueに遷移しusers/showを叩いて、ユーザー画面を表示したいです。
なお、users.vueに関してはerb内で<%= javascript_pack_tag 'users' %>のような形でviewを呼び出すのではなく、vue-routerで定義したパスを元にerb,routes.rbから独立したページを表示させたいです。

困っていること

vueやvue-routerに関する知見が薄いのもそうですが、railsから独立したページ(routes.rbで定義していないpath)を表示するhowが分からず困っております。
以下はネット情報を見様見真似で書いていますので、ここからどのような方向性(○○というファイルを加える、○○を記載する)で実装を行えば良いかお伺いしたいです。

イメージとしては以下のようにログイン成功後、$router.pushでusers/:idに遷移を行い
url欄にはhttp://localhost:3000/api/v1/users/id という形でurlをあらわし、
javascripts/users.vueを表示したいです。

<!-- app/javscript/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>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
export default{
    data: function() {        
　　//省略
    },
    methods: {
        onSubmit: function() {
            axios
                .post("http://localhost:3000/api/v1/auth/sign_in", {
                email: this.email,
                password: this.password,
                })
                .then((response) => {
　　　　　　　　　　　this.$router.push("users/show/ ${response.data.user_id}");
                })
                .catch(error => {
                    alert(error);
                })
        }
    }
}
</script>

/* app/javscript/router/login_router.js */

import Vue from "vue";
import VueRouter from "vue-router";
import users from "../users.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/users/:id",
    name: "User",
    component: users,
  }
];

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes,
});

export default router;

現状はTypeError: Cannot read property 'push' of undefined
というエラーが出ており、vue-routerの読み込みができていないのかなと思いますが、
これを含めてどのような方向性でファイルをフィックスするべきかご教示いただけると幸いでございます。
お手数をおかけしますがよろしくお願いします。