Григорий К.

Для динамического рендеринга по схеме, где данными описано, что рендерить, в целом достаточного просто циклом пройтись по этим данным и вывести нужный компонент через динамический компонент.

```html

{{ specification.name }}
:is="componentForFormElement[specification.type]"
:id="some-generated-id"
v-model="results[specification.name]"
:required="specification.is_required"
:options="specification.options"
/>

```

Конкретный вид будет зависеть от того, что у вас есть для вывода элементов формы, но общая идея - динамически выводить нужный компонент, в зависимости от `type`. Самое удобное, если для каждого типа есть свой компонент. и они имеют одинаковый интерфейс, чтобы им можно было одинакового передать параметры.

Если компонентов нет, можно сделать и топорно - прямо ифами в шаблоне определять, как рендерить в зависимости от типа.

По второму вопросу - можно сделать объект, где ключ - имя поля формы (правда, у вас будто нет поля в описании для этого, потому я использовал name), а значение - значение элемента формы по этому имени.

Ты нигде не показываешь, как делаешь экспорт.

Сами по себе CommonJS модули уже реализуют Singleton.

// app/app.js
const Shop = require("./files/Shop");
const shop = new Shop();

module.exports = shop;

// app/files/Fruits.js
const shop = require('../app'); // shop, созданный в app.js, будет всегда один и тот же

При подключении файла require('../app'); заново, будет получен тот же самый shop.

Если ты хочешь получить shop из модуля Shop, то ты можешь создать его один раз там и экспортировать.

Сделайте отдельный метод типа fetchData(). Вызывайте его в mounted.

fetchData() {
  this.dataRequest.then(response => {
        this.filter() // для планировок экшен
        this.setMarkers(this.residentials)
        this.map.on("zoomstart", this.onZoomStart);
        this.map.on("zoomend", this.onZoomEnd);
        
      })
      .catch(error => {
        this.fetchData();
      });
}

Но по-хорошему бы:
1. Разбить это на большее число методов, выделив работу с картой в отдельный метод от получения данных
2. fetchData в catch запускать через timeout
3. В catch надо бы определять, что проблема именно сети, а не другая: ни ошибка с сервера, ни какая-то на клиентской стороне. Не знаю, чем и как вы шлёте запросы, по этому не могу сразу код предложить.

На ES по-старше будет чуть красивее:

mounted() {
    this.markers = DG.featureGroup();
    this.popups = DG.featureGroup();

    this.map = DG.map("map", {
      center: [54.98, 82.89],
      zoom: 9,
      minZoom: 7,
      zoomControl: false,
      fullscreenControl: false
    });
    
    await fetchData();
    this.setMapMarkets();
  },
  methods: {
    setMapMarkers() {
        this.filter() // для планировок экшен
        this.setMarkers(this.residentials)
        this.map.on("zoomstart", this.onZoomStart);
        this.map.on("zoomend", this.onZoomEnd);
    },
   
    async fetchData() {
        try {
            const response = await this.dataRequest();
            // как-то надо использовать response, но у вас нет использования
        } catch (e) {
            // if ошибка сети
           await this.fetchData()
        }
    }
  }

WebGL -- это компьютерная графика. Для начала я бы рекомендовал прочитать собственно основы по нему.
Вот тут есть отличный туториал: https://webglfundamentals.org/webgl/lessons/ru/

Затем можно смотреть на фреймворки, которые упрощают работу с графикой. Это собственно pixijs для 2D графики, threejs для 3D графики. По ним достаточно смотреть их документации. Можно также глянуть https://threejsfundamentals.org/

Больше список разных фреймворков есть, например, тут.

А чего-то совсем готового именно для создания сразу таких сайтов, а не работы с графикой вообще -- я не видел. Совсем полуготового конструктора / библиотеки нет. Берётся библиотека для работы с графикой (pixi, three), и создаётся сайт)

На production они уже будут работать на одном порту.

На локалке в дев работают в браузере с приложением, которое поднято vue (webpack dev server, в вашем случае на 8080).

Чтобы запросы с приложения шли на сервер на nodejs достаточно добавить прокси в вебпак.
Во vue.conf.js (или как там конфиг называется) добавить в конфиг вебпака:

devServer: {
    proxy: {
      '/api': 'http://localhost:3000'
    }
}

Ссылка на доку по прокси в вебпаке

Ссылка на доку по конфигурированию вебпака во vue cli

Это всё, если у вас SPA.