How to create multiple instances of Vue within the same application? Or is there a better option?

Question

Vue.js

There is an application that receives settings from the server in the form of a json file. These settings populate the object inside the vue component, exposing the stored values.
Visually for the user, each setting is a rectangle - either with an input for entering a value, or with a toggle button, or a drop-down list. Moreover, any setting can depend on the other / others - if their values ​​satisfy some conditions, the dependent setting is shown. In the future, it will be necessary to do so that the drop-down list for settings can be loaded from the server.
That is, something emerges that should be an independent entity - have asynchronous methods, its own data for storing state, its own hooks and the ability to handle all sorts of edge cases. Initially, I thought to make it as an array in computed, then as an array in data, then as instances of the js class. But each of the ways looks not the most correct.
Please help me figure out the best way to organize all this.

Answer 1

I would do like this:

1. Received an array with settings from the server
   
2. Processed and saved in data
   
3. In the markup, I walked through the processed array using v-for
   
4. Using v-if displayed the desired setting component