Rails×Vue　Vue routerでpathを設定してもroutes.rbのルーティングを見てしまう

現在、Vueの学習をしているものです。

railsはAPIとして呼びたいので、vue-routerでroutes.rbに定義していないものをpathに指定したいと思っております。

ですが、今回だとhttp://localhost:3000/user_show'にアクセスしようとするとRailsのRouting Errorエラーが表示されてしまいrouter.jsで定義しているコンポーネントを見てくれていないように感じます。

どのようにしたら、Vue routerで定義しているpathを見てくれるようになりますでしょうか？

ご教示頂けますと幸いです。

app.vue

<template>
  <v-app id="inspire">
    <Header/>
    <router-view>
    </router-view>
  </v-app>
</template>

<script>
 import Header from "./components/Header";

 export default {
    components: {
      Header,
    },
 }
</script>

router.js

import Vue from 'vue'
import Router from 'vue-router'
import UserShow from '../components/UserShow'
import UserSearch from '../components/UserSearch'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/user_show',   ←routes.rbにはない
      name: 'UserShow',
      component: UserShow
    },
    {
      path: '/',
      name: 'UserSearchForm',
      component: UserSearch
    }
  ]
})

routes.rb