Vue.js - proper use of multiple Vue instances?

Question

My question is somewhat related to this one , however, it is not apparent to me to what extent the described approach is actively discouraged by Vue.

In my case I face the following scenario: I work on a project where the DOM is provided entirely by the php backend per twig templates and is intended to be enriched with further business logic on the frontend via Vue.

A minimal twig-less sketch can be found here

I understand that I lose out on the reactivity feature of Vue.js by creating a new Vue instance for each of the DOM elements in question. In the current context, it is a tradeoff I can live with as there is no dependency on cross-component state updates. However, is it an absolute antipattern to use Vue in this form, ie multiple Vue instances instead of one parent instance?

Answer 1

1. You only miss out on reactivity between components, not within components.
2. You can still have reactivity between components by using an additional shared Vue instance or shared reactive state.

It is not an antipattern if isolation is your goal.