Multiple Vue Instances on same page using same codebase

For anybody that comes across this, I ended up just initializing the Vue instances like this:

const sections = document.getElementsByClassName( "my-wrapper" )for ( var i = 0; i < sections.length; i ++ ) {    new Vue( {         el: '#' + sections[ i ].id,         store     })}

Basically initializing new Vue instance on each output found on the page, passing the shared store to each one.

I haven't done this multiple Vue instances setup myself, but I read at a couple places that Vue is designed to support this use-case. See for example here: Vue: is multiple Vue apps for a single website okay?

Vuex is great for a bigger SPA with multiple components and what you suggest is essentially the same thing without a shared root instance between all the components. This is where the Vuex store will be very useful by keeping every Vue component on the page synchronized with a single "source of truth" of the app's data.

I'm not sure I get that part of your question though:

My first thought is to use Vuex storage, attaching the single storage to all instances, storing any selected values, and triggering a dispatch to update the listings when any of them change.

When the data is updated in the Vuex store, if you setup Vuex properly, updates to the DOM will happen "reactively" automatically. There is no action to take other than modifying the store's data.

Regarding your update, maybe it will work, but it doesn't seem like a good idea to me. It sounds like going against the way Vue is normally used and I don't recall any part of the documentation that mentions such a setup.

Like I said, I don't have direct experience with your proposed design, so I may have missed something. Thought I'd share anyway.