Переменные состояния Vuex удаляются

Question

TLDR: почему переменная store импортирует 4 переменные VUEX в одном файле js и 2 переменные VUEX в другом файле js?

У меня очень странная проблема, над которой я застрял некоторое время. У нас есть 4 переменных состояния Vuex для нашего сайта (навигация, selectedStore, uri и функция). Я импортирую хранилище, чтобы получить их в верхней части моего файла index.js. Без этого импорта я получаю все 4 переменные Vuex, которые отображаются в инструментах разработчика Vue на сайте. Как только я добавлю в эту строку импорта, 2 из них исчезнут (URI и функция исчезли) Но мне нужен этот импорт, чтобы получить переменные моего магазина. Так что я в замешательстве. Без этого импорта и включения store в экземпляр Vue я получаю следующую ошибку в консоли: [Vue warn]: Error in mounted hook: "TypeError: this.$store is undefined"

index.js

import ProductSlider from '../../components/slider/ProductRecommendationsSlider'
import Vue from 'vue';
import VueCarousel from 'vue-carousel';
import Vuex from 'vuex';
import store from '../modules/global-state'; // this is the culprit line
import global from '../modules/util/global';

Vue.use(Vuex);
Vue.use(VueCarousel);

Vue.prototype.$store = Vue.prototype.$store || store;

global.qubitProductDetailsRecommendationsVue=function(compositeModelNumbers) {
    var params = {
      compositeModelNumbers: compositeModelNumbers,
      strategy: 'pp1',
      backupStrategy: 'popular',
      divId: 'recommendedProductsDetailsHorizontal',
      isVertical: false,
      isHideHeaderText: false,
      headerText: 'Guests Who Viewed This Item Also Viewed These',
      backupHeaderText: 'Popular Products',
      itemsPerPage: 5,
      itemDisplayLimit: 10,
      numberOfItems: 15,
      qubitResponseMap: null
    };

  /* eslint-disable no-new */
  new Vue({
    el: '#recommendedProductsDetailsHorizontal',
    store,
    components: {ProductSlider},
    data: { params },
    template: '<product-slider/>'
  });
};

ProductRecommendationsSlider.vue

<script>
  import Slider from './Slider'
  import {mapState} from 'vuex'
  //import axios from 'axios';

  export default {
    name: "Slider",
    components: {
      Slider
    },
    props: {
      numSlides: {
        type: Number,
        default: 5
      },
      itemsPerPageCssStyle: {
        type: String,
        default: "slider5buckets" // need to eventually make this dynamic, logic is in GridDynamic_DynamicProductRecs.java on lines 125-130
      }
    },
    data: function () {
      return {
        products: [
          {id: 1, img: 'https://placeimg.com/100/100', price: 4.56},
          {id: 2, img: 'https://placeimg.com/101/101', price: 1.23},
          {id: 3, img: 'https://placeimg.com/102/102', price: 2.34},
          {id: 4, img: 'https://placeimg.com/103/103', price: 9.87},
          {id: 5, img: 'https://placeimg.com/104/104', price: 3.45},
          {id: 6, img: 'https://placeimg.com/105/105', price: 12.34},
        ],
        params: this.$parent.params
      }
    },
    computed: {
      ...mapState({
        selStoreID: state => state.selectedStoreId,
        //baseUri: state => state.uri.application || '/main/',
        serviceHost: state => state.uri.service
      }),
    },
    mounted() {
      console.log('strategy: ' + this.params.strategy);
      this.initSlider();
    },
    methods: {
      initSlider () {
        let vm = this;
        let vmStore = vm.selStoreID;
        console.log(vmStore);

<template>
  <div
    id="recommendedProductsDetailsHorizontal"
    :class="['imageSliderContainer', itemsPerPageCssStyle]"
    style="width:100%;height:374px;">
    <h2>{{ params.headerText }}</h2>
    <div
      class="wrapper"
      style="height:355px;">
      <div class="carousel-view">
        <carousel
          :navigation-enabled="true"
          :min-swipe-distance="1"
          :per-page="5"
          navigation-next-label="<i class='fas fa-angle-right'></i>"
          navigation-prev-label="<i class='fas fa-angle-left'></i>">
          <slide
            v-for="product in products"
            :key="product.id">
            <div class="img-container">
              <a
                href="#"
                class="handCursor"
                tabindex="0">
                <img
                  :src="product.img"
                  :alt="'Product #' + product.id">
              </a>
            </div>
            <h4>Product #{{ product.id }}</h4>
            <div class="price-div">
              <div class="allPriceDescriptionPage">${{ product.price }}</div>
            </div>
            <a
              href="#"
              tabindex="0"
              name="instantadd">
              <div class="btn_CA_Search buttonSearch gradient"> Add to Cart</div>
            </a>
          </slide>
        </carousel>
      </div>
    </div>
  </div>
</template>

global-state / index.js - URI и функция получены из return JSON.parse(global.__VUEX_STATE__);

import global from '../util/global';
import navigation from './modules/navigation';
import selectedStore from '../store/selected-store';
import Vue from 'vue';
import Vuex from 'vuex';
import _ from 'lodash';
import '@babel/polyfill';

Vue.use(Vuex);

const defaultState = {
  selectedStore: {}
};

const serverState = (() => {
  try {
    return JSON.parse(global.__VUEX_STATE__);
  } catch (e) {
    return {};
  }
})();

const store = new Vuex.Store({
  state: Object.assign({}, defaultState, serverState),
  modules: {
    navigation
  },
  getters: {
    selectedStoreId: state => {
      let store = state.selectedStore;
      if (_.isEmpty(store) || _.isEmpty(store.address)) {
        return 3598;
      }
      return store.id;
    }
  },
  mutations: {
    setSelectedStore(state, payload) {
      if (_.isFinite(payload)) {
        selectedStore.set(payload).then(result => state.selectedStore = result);
      } else {
        state.selectedStore = payload;
      }
    }
  },
  actions: {
    fetchSelectedStore({commit, state}) {
      return new Promise((resolve) => {
        if (!_.isEmpty(state.selectedStore)) {
          resolve();
        }

        selectedStore.get(false).then(store => {
          commit('setSelectedStore', store);
          resolve();
        });
      });
    }
  }
});

store.dispatch('fetchSelectedStore');
store.dispatch('navigation/fetchQuickLinks');

export default store;

Обновление: - добавление дополнительной информации на случай, если что-нибудь поможет. Вот другой файл index.js для другого компонента. Переменная store в этом index.js включает в себя все 4 переменные Vuex. Я не могу понять разницу.

index.js

import Header from '../../components/header/Header';
import Vue from 'vue';
import axios from 'axios';
import store from '../modules/global-state';
import '@babel/polyfill';

Vue.prototype.$http = Vue.prototype.$http || axios;
Vue.prototype.$store = Vue.prototype.$store || store;

/* eslint-disable no-new */
new Vue({
  el: '#header',
  components: {Header},
  template: '<header/>'
});