Issue with Computed property and dynamic routes

vue-router
vuex

#1

Main Issue
In my Vue tools I can see that the Vuex store is changing as components are added and removed, but the computed property does not update.

I am having an interesting issue with computed properties that I havn’t encountered before in Vue. If I start at the initial page/route ‘/’ and navigate to ‘/components’ my data from computed properties is un-reactive. However, when I refresh the page, the data is now reactive and items can be added and removed from the components page. If I navigate to the ‘environments’ page from the ‘components’ page the data is still reactive. However, if I navigate back to ‘/’ and go back to the ‘components’ page the data is no-longer reactive.

Component that become un-reactive

<template>
  <div id="components-view">
    <v-layout class="components-view-container" align-start row>
      <v-flex class="text-xs-center" md12 lg12 xl11>
        <template v-if="!getIsLoading && getComponents.length > 0">
          <data-table :items="getComponents" :headers="headers" :row="row" :pagination="pagination">
            <template slot="data">
              <tr v-for="item in getComponents" :key="item.id">
                <!-- If Order is set -->
                <template v-if="order && item.order">
                  <td>
                    <v-icon>arrow_upward</v-icon>
                    <v-icon>arrow_downward</v-icon>
                  </td>
                </template>
                <td>
                  <router-link
                    :to="{
                      name: 'environments',
                      params: {
                        componentId: item.id,
                        selectedComponent: item
                      }
                    }"
                    v-on:click.native="setSelectedComponent(item)"
                  >{{ item.name || '-' }}</router-link>
                </td>
                <!-- If this Datatable has a health column -->
                <td>
                  <!-- Environment Health Status -->
                  <v-icon v-if="item.healthStatus === 'Good'" class="status-good">check</v-icon>
                  <v-icon v-if="item.healthStatus === 'Bad'" class="status-bad">error</v-icon>
                  {{ item.healthStatus || '-' }}
                  <v-tooltip top>
                    <v-icon class="status-info" slot="activator">info</v-icon>
                    <span>Test Tooltip</span>
                  </v-tooltip>
                </td>
                <td>{{ item.lastDeployment || '-' }}</td>
                <td>
                  <router-link
                    :to="{
                      name: 'environments',
                      params: {
                        componentId: item.id,
                        selectedComponent: item
                      }
                    }"
                  >{{ item.prodVersion || '-' }}</router-link>
                </td>
                <td>{{ item.technology || '-' }}</td>
                <!-- If Actions is set -->
                <template>
                  <!-- Actions Column -->
                  <td :key="item.id">
                    <!-- Delete Row -->
                    <v-icon small @click="handleDeleteComponent(item)">delete</v-icon>
                  </td>
                </template>
              </tr>
            </template>
          </data-table>
        </template>
        <div v-else-if="!getIsLoading && getComponents.length === 0">
          <h3>Please add a component...</h3>
        </div>
        <div v-else>
          <v-progress-circular indeterminate size="80" color="#074967"></v-progress-circular>
        </div>
      </v-flex>
    </v-layout>
  </div>
</template>

The Computed Property

  get getComponents(): object[] {
    return this.$store.state.selectedProduct.components;
  }

Routing Code

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/products',
      alias: '',
      name: 'products',
      component: () =>
        import(/* webpackChunkName: "ProductsPage.vue" */ './../components/ProductsPage.vue'),
      props: true
    },
    {
      path: '/products/:productId/components',
      name: 'components',
      component: () =>
        import(/* webpackChunkName: "ComponentsPage.vue"*/ './../components/ComponentsPage.vue'),
      props: true
    },
    {
      path: '/products/:productId/components/:componentId/environments',
      name: 'environments',
      component: () =>
        import(/* webpackChunkName: "EnvironmentsPage.vue"*/ './../components/EnvironmentsPage.vue'),
      props: true
    },
    {
      path:
        '/products/:productId/components/:componentId/environments/:environmentId',
      name: 'deployments',
      component: () =>
        import(/* webpackChunkName: "DeploymentsPage.vue"*/ './../components/DeploymentsPage.vue'),
      props: true
    }
  ]
});

Routing HTML

<template>
  <v-app id="app">
    <!-- Main Site Nav -->
    <main-navigation></main-navigation>
    <!-- Alerts -->
    <alert></alert>
    <v-content>
      <router-view></router-view>
    </v-content>
  </v-app>
</template>