问Vue.js push.route不更改应用程序中的组件

EN

<script>
  export default {

    data: () => ({
      valid: true,
      name: '',
      userRules: [
        v => !!v || 'Name is required',
      ],
      password: '',
      passwordRules: [
        v => (v && v.length <= 10) || 'Password must be less than 10 characters'
      ],
    }),

    methods: {
      validate () {
        if (this.name == "User" && this.password == '99999' && this.$refs.form.validate()) {
          console.log(this.name, this.password)
          this.$router.push('someOtherPage')
        }
      },
    }
  }
</script>

import Vue from "vue";
import Router from "vue-router";
import Home from "./views/Home.vue";
import SomeOtherPage from "./pages/someOtherPage";

Vue.use(Router);

export default new Router({
  mode: "history",
  base: process.env.BASE_URL,
  routes: [
    {
      path: "/",
      name: "home",
      component: Home
    },
    {
      path: "/someOtherPage",
      name: "SomeOtherPage",
      component: SomeOtherPage,
    },
  ]

});

import Vue from "vue";
import './plugins/vuetify'
import App from "./App.vue";
import router from "./router";
import store from "./store";
import VeeValidate from 'vee-validate';

Vue.use(VeeValidate);
Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

<template>
  <v-app>
    <v-content>
      <div>
        <h3>This is some other page</h3>
      </div>
    </v-content>
  </v-app>
</template>

<script>

export default {
  name: 'someOtherPage',
  data () {
    return {
      //
    }
  }
}
</script>

<style scoped>

</style>