Klein Maximus

Без скобок:
@click="addPassportRF"

В данном случае в обработчик события должна передаваться ссылка на функцию (метод). Вот если бы метод addPassportRF возвращал функцию, то можно было бы и со скобками.

P. S.: Декомпозируйте компонент - не надо их делать такими огромными.

P. S. 2: Если у Вас элемент <span @click="addPassportRF()" class="button"> ведет себя как кнопка, то придерживайтесь семантики и используйте <button>

Если рассматривать компонентное приложение (на Vue, например), то верстаться должно не всё приложение, а конкретный компонент, который потом будет "переиспользоваться". Соответственно, если в компоненте присутствует какая-то логика, то и реализовывать ее нужно в рамках vue-компонента (причем ничего не мешает использовать jQuery рядом с Vue, хотя это излишне - все что можно сделать на jQuery, на Vue делается намного проще, быстрее и короче).
Вполне возможно, что верстку HTML/CSS (с препроцессорами для css или шаблонизаторами, типа pug) делает один человек (верстальщик), т. е. отвечает за статическое представление, и передает готовые сверстанные шабьлоны КОМПОНЕНТОВ, а не всей страницы другому (frontend-разработчику), который может внедрять какую-то логику поведения.

resolve: {
    alias: {
        'vue$': 'vue/dist/vue.esm.js',
    },
}

https://webpack.js.org/configuration/resolve/#reso...

А зачем регистрировать jivosite в качестве компонента?
Лучше это оформить плагином (как Метрика и Карты).

Как вариант, во время скролла у всех ссылок на странице добавлять хэш со значением прокрутки, а при открытии другой страницы скроллить вниз. Другой вариант, слушать собитие click на ссылке, перехватывать его, "превентить", а отправлять кастомно на адрес с хешем, как в предыдущем варианте. Соответственно, новая страница должна уметь делать скролл к указанному значению.
Это если серверный рендеринг. Если SPA, то сильно зависит от архитектуры.

Vue с серверным рендерингом отдаёт "по старинке обычную семантическую html разметку".
https://ssr.vuejs.org/
https://nuxtjs.org/

Можно, например, закэшировать результаты после первого запроса в LocalStorage, и при последующих подключениях компонента проверять наличие сохраненных данных. Но всё равно, нужен механизм очистки кэша по времени или по действию пользователя.

Я забил на Реакт и использую Vue (вместе с SSR).
https://ru.vuejs.org/
https://ssr.vuejs.org/ru/
https://nuxtjs.org/

Если нужно плавное появление, но незачем использовать animation - достаточно простого transition.
Просто нужно либо проставлять position: absolute, чтобы компоненты накладывались друг на друга и не прыгали, либо указать mode="out-in" - Режимы переходов.

Отказаться от Bootstrap?

Есть готовый компонент - https://github.com/PNKBizz/vue-yandex-map

https://developer.mozilla.org/ru/docs/Web/API/Wind...

Чтобы сменить url можно использовать империативную навигацию.

let str = `[
    {"A": "Value for A", B: "Value for B", "foo": "foo"},
    {"A": "Value for A", B: "Value for B", "bar": 13},
    {"A": "Value for A", B: "Value for B", "foo": "foo", "val": true}
]`;
let result = JSON.parse(str).map(item => {
  let others = { ...item };
  delete others.A;
  delete others.B;
  return {
    A: item.A,
    B: item.B,
    ...others
  };
});