Modal window on vue.js into a finished project on Bitrix?

Question

1C-Bitrix

Hello! I made a modal window on vue.js: there is a modal call button, a window is called on click. I want to implement it on a ready site on Bitrix, but I don’t understand the logic a bit. In essence, there are two questions:
1. If everything is generated in #app, then how can you place several #apps on one page, because there can be several buttons for calling a modal window on one page.
2. Is it possible to insert a Bitrix connection form into this modal window?

Answer 1

We use Vue to implement individual components, including on "traditional" sites.
It is also possible with a modal window (full-fledged, with portal-vue, etc.). Simplified example:

import Vue from 'vue';
import Modal from '@/scripts/vue/components/Modal.vue';

// Находим элемент-компонент
// Скорее всего тут будет не id, а что-то вроде селектора по классу js-some-thing и т.д.
const el = document.getElementById('some-id');

// Создаём элемент для vue-компонента
// И помещаем его внутрь
// Не обязательно, но так удобно потом "прибираться"
const mountingPoint = document.createElement('div');
el.appendChild(mountingPoint);

// Создаём инстанс vue, монтируем его в наш элемент
let modal = new Vue({
  el: mountingPoint,
  render(h) {
    // А вот и модалка
    return h(Modal);
  },
});

Accordingly, you can pass props, nest other components in the modal, change the date, listen to events, etc. etc.
Learn more about render functions https://ru.vuejs.org/v2/guide/render-function.html
When to clean up after yourself:

modal.$destroy();
  modal.$el.parentElement.removeChild(modal.$el);
  modal = null;

Answer 2

As an option - do not stick the whole framework where you can get by with a couple of lines of the usual js to show the modal window

Answer 3

I'm just getting started, but...
1. #app in DOM translation is an ID. It can only be unique (the only one).
2. Make #app1, #app2, #app3,...
3. With my poor knowledge of a foreign language, the example seems to fit: https://medium.com/@disjfa/using-vue-js-in-existin...