Vue.js VueRouter router-link изменяет URL-адрес, но страница не работает

мой файл main.js имеет следующее

import TurbolinksAdapter from 'vue-turbolinks';
import Vue from 'vue/dist/vue.esm';
import VueRouter from 'vue-router';
import EventIndex from '../src/views/EventsIndex.vue';
import EventsTable from '../src/components/EventsTable.vue'
import { routes } from '../src/router/routes';

Vue.use(TurbolinksAdapter);
Vue.use(VueRouter);

const router = new VueRouter({
  routes,
  mode: 'history'
});

document.addEventListener('turbolinks:load', () => {
  var element = document.getElementById('vue_code');
  if (element != null) {
    new Vue({
      el: '#vue_code',
      Store,
      router,
      render: h => h(EventIndex)
    });

В моем файле routes.js есть следующее:

import Vue from "vue/dist/vue.esm";
import VueRouter from "vue-router";
import EventForm from "../components/EventForm";

Vue.use(VueRouter);

const routes = [
  {
    path: "/events/new",
    name: "EventForm",
    component: EventForm
  }
];

Фрагмент ссылки на маршрутизатор из моего файла компонента EventsTable.vue имеет следующее:

<template lang=haml>
...

%tbody
  %tr{v-for: "event in events"}
    %td
      %router-link.fa.fa-pencil{to: "/events/new"}
      %router-view

 ...
<template>

<script>
    import EventForm from './EventForm';

    components: {
      EventForm
    }
</script>

Когда я нажимаю на ссылку, я ожидаю, что страница изменится на страницу EventForm. Вместо этого URL-адрес изменяется, но окно браузера не меняется. Но как только я перезагружаю страницу, браузер переходит на страницу EventForm.

Любая помощь приветствуется. Спасибо