Multiple independent instances

[digram]

I have a page with multiple <widget-vue></widget-vue> and currently when a change occurs in one, the others receive the same change simultaneously.

For example, if we have an input box in the widget and a user starts to type in, it updates the input boxes of the other widgets with the same text.

Is it possible to make each <widget-vue></widget-vue> completely independent of any other <widget-vue></widget-vue> residing on the same page?

[karol-f]

It already is! I think you share with them the same model object or same store instance so they mutate same place.

Can You prepare e.g. Codesandbox so we can track it down?

[digram]

You're right! I'm using one store and route instance like so

import App from './App.vue' import router from './router' import store from './store/index' import vueCustomElement from 'vue-custom-element' Vue.use(vueCustomElement) App.store = store App.router = router Vue.customElement('widget-vue', App)

My aim is to have each <widget-vue></widget-vue> to have it's own instance of store and router.

Could this be achieved by declaring store and route outside App component maybe? If so, any suggestions on how to achieve this?

[karol-f]

1). You can create separate instance of e.g. store for individual custom elements using e.g. beforeCreateVueInstance hook (https://github.com/karol-f/vue-custom-element#options).

2). You can also dynamically create store modules in e.g. created hook in App.vue (https://vuex.vuejs.org/guide/modules.html#dynamic-module-registration).

3). You can also namespace or use separate id's in one store, using e.g. unique id that is given to all components - this._uid

There are many options, choose what suits You best.

[digram]

Thanks for the detailed options. I think this is now resolved.