Is it possible to create a copy of store for the same component with different id's?

Question

Vue.js

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);

import App from '../components/my-app/Index.vue';
import thisStore from '../store/modules/thisStore/thisStore';

const appInstances = document.querySelectorAll('.appInstance');

appInstances.forEach((appInstance)=>{

    // так оба экземпляра один стор юзают
    const store = new Vuex.Store({
        modules: { thisStore }
    });

    new Vue({
        el: `#thisApp_${  appInstance.dataset.id}`,
        store,
        components: { App },
    });

});

<app class="appInstance" data-id="1" id="thisApp_1"></app>
<app class="appInstance" data-id="2" id="thisApp_2"></app>

Answer 1

Perhaps :)
"// so both instances use the same store", because here - modules: { thisStore } - a reference to the module / object (and not a new / another module / object) is
passed, you refer to thisStore (you have one) in all instances

Answer 2

On objects I create without vuex store this works
https://codesandbox.io/s/vigorous-lake-k5u8p?file=...

let original = {
  foo: 'original',
  bar: {
    a: 1,
    b: 2
  }
};

let clone = {};

for (let key in original) {
  clone[key] = original[key];
}

clone.foo = 'clone'; 

console.log( original ); 
console.log( clone );

Not working with vuex store https://jsfiddle.net/84j5bfg9/2/

<div id="app1">
  <p>{{ count }}</p>
  <p>
    <button @click="increment">+</button>
    <button @click="decrement">-</button>
  </p>
</div>

// make sure to call Vue.use(Vuex) if using a module system

let original = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
  	increment: state => state.count++,
    decrement: state => state.count--
  }
})



// 1
let clone = {};

for (let key in original) {
  clone[key] = original[key];
}


/* 
// 2
var clone = Object.assign({}, original);
 */

console.log( original.state.count ); 
console.log( clone.state.count );


new Vue({
  el: '#app1',
  computed: {
    count () {
      return clone.state.count
    }
  },
  methods: {
    increment () {
      clone.commit('increment')
    },
    decrement () {
    	clone.commit('decrement')
    }
  }
})

Well, when I connect lodash.cloneDeep() I get
Uncaught TypeError: Cannot convert a Symbol value to a string

import Vue from 'vue';
import Vuex from 'vuex';
import VueLodash from 'vue-lodash';
import lodash from 'lodash';

Vue.use(Vuex);
Vue.use(VueLodash, { lodash: lodash });

import App from '../components/copy-calculator/Index.vue';
import myApp from '../store/modules/myApp/myApp';

const store = new Vuex.Store({
    modules: { myApp }
});

// Это работает
// let data = [
//     { id: 1, values: { a: 'a', b: 'b' } },
//     { id: 2, values: { c: 'c', d: 'd' } }
// ];
// let clone = lodash.cloneDeep(data);
// console.log(clone);


const appInstances = document.querySelectorAll('.myApp');
appInstances.forEach((appInstance)=>{

   // Это уже не работает
    let clone = lodash.cloneDeep(store);

    new Vue({
        el: `#myApp_${  appInstance.dataset.id}`,
        clone,
        components: { App },
    });

});