router.pushがきかない

vue.jsとRuby on Railsのお問い合わせフォームを作成しています。
vueファイルからパラメーターを送ってrails側で処理しデータを作成することはできているんですが、作成後の画面遷移でcreateContact関数内のrouter.push({ path: '/contacts/thanks' })が動かなくて困っています。
遷移後の画面（Thanks.vue）はちゃんとrouter.jsで定義できていると思います。

どなたかご教授いただけると幸いです。よろしくおねがいします(T . T)

##Contact.vue

<template>
  <div class = "container">
    <h3 class = "head">お問い合わせ</h3>
    <form name="contact">
      <div class="field name">
        <div class="last-name">
          <label>姓</label>
          <input class="input" 
            type="text" 
            v-model="lastName" 
            placeholder="山田"  
            name="last_name"
            data-vv-as="姓"
            v-validate= "modelValidations.lastName"
          :class="{'input': true, 'form-danger': 
          errors.has('lastName') }"
          />
          <div class="form-control-feedback" v-show="errors.has('last_name')">
            <p class="alert alert-danger">{{ errors.first('last_name') }}</p>
          </div>
        </div>
        <div class="first-name">
          <label>名</label>
          <input class="input" 
            type="text" 
            v-model="firstName" 
            placeholder="太郎"  
            name="first_name"
            data-vv-as="名"
            v-validate= "modelValidations.firstName"
          :class="{'input': true, 'form-danger': 
          errors.has('firstName') }"
          />
          <div class="form-control-feedback" v-show="errors.has('first_name')">
            <p class="alert alert-danger">{{ errors.first('first_name') }}</p>
          </div>
        </div>
      </div>
      <div class="field">
        <label>メールアドレス
        <input class="input" 
          type="email" 
          v-model="email" 
          placeholder="xxx@xxx.com"  
          name="email"
          data-vv-as="メールアドレス"
          v-validate= "modelValidations.email"
         :class="{'input': true, 'form-danger': 
         errors.has('email') }"
        /></label>
        <div class="form-control-feedback" v-show="errors.has('email')">
          <p class="alert alert-danger">{{ errors.first('email') }}</p>
        </div>
      </div>
      <div class="field">
        <label>お問い合わせ内容
        <textarea class="textarea" 
          type="text" 
          v-model="message" 
          placeholder="詳細内容をご入力ください"  
          name="message"
          data-vv-as="お問い合わせ内容"
          v-validate= "modelValidations.message"
         :class="{'input': true, 'form-danger': 
         errors.has('message') }"
        /></label>
        <div class="form-control-feedback" v-show="errors.has('message')">
          <p class="alert alert-danger">{{ errors.first('message') }}</p>
        </div>
      </div>
      <div class="field send">
        <button class="button is-link" type="submit"　@click="validate">送信する</button>
      </div>
    </form>
  </div>
</template>

<script>
import router from '../../packs/router.js'
import Vue from 'vue';
import VeeValidate from 'vee-validate';
Vue.use(VeeValidate);
export default {
  head: {
    title: 'Contact'
  },
  data () {
    return {
      lastName: '',
      firstName: '',
      email: '',
      message: '',
      modelValidations: {
        lastName: {
          required: true,
        },
        firstName: {
          required: true
        },
        email:{
          required: true
        },
        message:{
          required: true
        },
      }
    }
  },
  methods: {
    validate() {
      this.$validator.validateAll().then(isValid => {
        if (isValid) {
          this.createContact ()
        } else {
          console.log(error)
        }
      })
    },
    createContact () {
      var condition = {
        contact: {
          last_name: this.lastName,
          first_name: this.firstName,
          email: this.email,
          message: this.message,
          company_id: "1"
        }
      }
      this.axios({
        method  : 'POST',
        url     : '/api/v1/contacts/',
        timeout : 10000,
        data: condition,
      }).then(response => {
⭐️⭐️⭐️⭐️⭐️⭐️⭐️⭐️ここ⭐️⭐️⭐️⭐️⭐️⭐️⭐️
          router.push({ path: '/contacts/thanks' })
      }).catch(error => {
        if (error.response.status === 401) {
          router.push({ path: '/' })
        } else {
          console.log(error.response)
        }
      })
    }
  }
}
</script>

##router.js

import Thanks from '../views/front/Thanks.vue'
const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/contacts/thanks',
      name: 'thanks',
      components: {default: Thanks}
    }
  ]
})
export default router

##contacts_controller.rb

class Front::Api::V1::ContactsController < Front::Api::V1::FrontController
 
  model_serializer Contact, Front::ContactSerializer

  def create
    @model = saved_model_serializer[0].new()
    @model.attributes = strong_params
    @model.save!
    render json: @model.reload, serializer: saved_model_serializer[1], root: nil
  end

  def thanks
  end

  private
  def strong_params
    params.fetch(:contact, {}).permit(:first_name, :last_name, :email, :message, :company_id)
  end
end

createは問題なくできています。

##route.rb

    namespace :api do
      namespace :v1 do
        resources :contacts, :only => [:new, :create] do
          collection do
            get :thanks
          end
        end
      end
    end