TypeError: невозможно прочитать свойство «заменить» неопределенного — VueJS

<template>
  <div id = "app">
    <div id = "nav">
      <router-link v-if = "authenticated" to = "/login" v-on:click.native = "logout()" replace>Logout</router-link>
    </div>
    <router-view @authenticated = "setAuthenticated" />
  </div>
</template>

<script>
    export default {
        name: 'App',
        data() {
            return {
                authenticated: false,
                mockAccount: {
                    username: "nraboy",
                    password: "password"
                }
            }
        },
        mounted() {
            if (!this.authenticated) {
                this.$router.replace({ name: "login" });
            }
        },
        methods: {
            setAuthenticated(status) {
                this.authenticated = status;
            },
            logout() {
                this.authenticated = false;
            }
        }
    }
</script>

<style>
  body {
    background-color: #F0F0F0;
  }
  h1 {
    padding: 0;
    margin-top: 0;
  }
  #app {
    width: 1024px;
    margin: auto;
  }
</style>

<template>
    <div id = "login">
        <h1>Login</h1>
        <input type = "text" name = "username" v-model = "input.username" placeholder = "Username" />
        <input type = "password" name = "password" v-model = "input.password" placeholder = "Password" />
        <button type = "button" v-on:click = "login()">Login</button>
    </div>
</template>

<script>
    /* eslint-disable no-console */

    export default {
        name: 'Login',
        data() {
            return {
                input: {
                    username: "",
                    password: ""
                }
            }
        },
        methods: {
            login() {
                if (this.input.username !== "" && this.input.password !== "") {
                    if (this.input.username === this.$parent.mockAccount.username && this.input.password === this.$parent.mockAccount.password) {
                        this.$emit("authenticated", true);
                        this.$router.replace({ name: "secure" });
                    } else {
                        console.info("The username and / or password is incorrect");
                    }
                } else {
                    console.info("A username and password must be present");
                }
            }
        }
    }
</script>

<style scoped>
    #login {
        width: 500px;
        border: 1px solid #CCCCCC;
        background-color: #FFFFFF;
        margin: auto;
        margin-top: 200px;
        padding: 20px;
    }
</style>

import Vue from 'vue'
import Router from 'vue-router'
import LoginComponent from "./components/Login"
import SecureComponent from "./components/Secure"

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/',
            redirect: {
                name: "login"
            }
        },
        {
            path: "/login",
            name: "login",
            component: LoginComponent
        },
        {
            path: "/secure",
            name: "secure",
            component: SecureComponent
        }
    ]
})