Seeking advice on dynamic UI rendering with Vue.js for a customizable frontend

Hi DEV community! I'm working on a project that requires a highly customizable frontend, and I'm looking for advice on the best approach. I'd really appreciate any insights or experiences you can share!

Project Requirements:

1. I'm building an application that needs a mechanism to create and render a dynamic frontend.
2. The backend is built with ABP.io (supports Multi-Tenancy).
3. The plan is to have pre-defined templates for frontend components.
4. Tenants will be able to select components and insert data (static or from a data source).
5. The user's customization will be stored as a JSON object in the database, containing template type and styles.
6. When a page is requested, the JSON object needs to be translated into HTML alongside the pre-defined templates.

I'm considering using Vue.js for the frontend, possibly with a component library like PrimeVue, Vuetify, or Element UI. However, I'm open to other suggestions that might fit this use case better.

My questions are:

1. Has anyone implemented a similar dynamic rendering system? If so, what approach did you take?
2. Which Vue.js component library would you recommend for this kind of customizable, JSON-driven UI?
3. Are there any specific design patterns or architectural approaches you'd suggest for managing this level of frontend flexibility?
4. How would you handle the translation of JSON configurations to actual rendered components efficiently?
5. Are there any potential pitfalls or performance considerations I should be aware of with this approach?

Additional Context:

• The application needs to support multi-tenancy (ABP.io backend)
• Performance and scalability are important considerations
• We're looking for a balance between flexibility for tenants and maintainability of the codebase

Any insights, experiences, or recommendations would be greatly appreciated. Thanks in advance for your help!