Vue component mounts multiple times (sometimes as many as 6 times)

Question

I am currently using vue-cli, webpack and vue-router. I have a Vue component called "indexAttro", which is being mounted multiple times (up to as many as 6 times). I discovered this bug after placing console.log("Mounted hook called for Attribution") in the mounted hook of my "indexAttro" component.

This behaviour only occurs when I navigate from my application's "dashboard" to the "indexAttro" page (refer to the routes below for more info). However, when I refresh the page or load the page through the URL, the "indexAttro" component/page only mounts once as expected.

How can I ensure my indexAttro component is only mounted once?

Below are the routes to my application

My vue-router is set to "history mode" and I am using "connect-history-api-fallback" in my application as per Vue docs.

const routes = [
    {
        path: "*",
        redirect: "/signin"
    }, {
        path: "/",
        redirect: "/signin"
    }, {
        path: "/signin",
        name: "SignIn",
        component: signIn
    }, {
        path: "/signup",
        name: "SignUp",
        component: signUp
    }, {
        path: "/dashboard",
        name: "Dashboard",
        component: dashboard,
        meta: {
            requiresAuth: true
        }
    }, {
        path: "/dashboard/:indexPortName",
        name: "Attribution",
        component: indexAttro,
        meta: {
            requiresAuth: true
        }
    }
]

My App.vue file is below

<template>
    <div id="app">
        <router-view></router-view>
    </div>
</template>

<script>
    export default {
        name: 'app'
    }
</script>

<style lang="scss">

</style>