Aetae

(?>[а-яёa-z])\+

.card {
  display: flex;
  flex-direction: column;
}

.card-body {
  flex: 1;
}

Девсервер специально лочит на локалхост по умолчанию, чтоб ктонить не решил выставить его в интернет. Это можно поменять тут.

Значение this кладётся в свойство ref на момент вызова makeUser. Это простое присвоение простой переменной.

Чтобы получать актуальный динамически - надо получать актуальный динамически, например:

function makeUser() {
    return {
        name: "Джон",
        get ref(){
          return this 
        }
    };
};
let user = makeUser();
console.log(user.ref);

Передавать данные скрыто через route params - плохо (но возможно push({name: <name>, params: {...}})). Если кто-то откроет страничку напрямую - он ничего не увидит.
Каждая страничка должна уметь получить данные самостоятельно.

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

Если либа зачем-то ставит элементу свой id - значит зачем-то ей этот id нужен. Переписывать его - это к багам. Либа скорее всего предоставляет свой способ отследить источник события.
...upd: проверил - он нормально пробрасывет id как есть, проблема у тебя в чём-то ином:

Чтобы что-то импортировать через import from надо чтобы в конечном файле был соответствующий export(т.е. тот файл тоже должен быть модулем). Простой import - это просто подключение скрипта как есть, всё равно что загрузка через <script>.

npm пакеты содержат разные версии дистрибутивов под разные способы подключения. Надо посмотреть куда указывает module(а не main) в package.json и именно этот файл можно будет подключать через import from.
Если module в package.json нет - значит библиотека не поддерживает современные es модули, увы, и придётся её использовать по-старинке(хотя лучше проверить глазами js файлы, изредка забывают указать). Именно такая ситуация наблюдается с lodash, однако есть либа lodash-es, которая решает эту проблему.

Также es модули - относительно новая система, до неё были commonjs модули, и они до сих пор используются в nodejs(как раз на них указывает main в package.json). Но из коробки без соответствующих либ они уже работать не будут.
Помимо esm и commonjs ещё полно всяких систем, но это уже отдельная тема.

P.S. Это был ответ на текст вопроса, ответ на заголовок - отдельная обширная и не простая тема и вряд ли вам нужен.

Никак. Каждый iframe - отдельная страница, со своей независимой памятью. Из-за безопасности и многопоточности браузер никак не шарит даже одно и то же.

В теории можно было бы конечно сделать "главную страницу" и прокидывать во фреймы функции, но на практике с чужим жирным кодом это нереально.

Во-первых: если ключи у вас строки - используйте объект без прототипа (Object.create(null)) вместо Map - работа с ним на порядок быстрее.
//upd: как верно заметил Дмитрий Беляев, в современных браузерах быстродействие Map не меньше Object.

Во-вторых: порядок ключей в Map соответствует порядку добавления и не может быть изменен постфактум. Вам следует для сортировки получить из Map массив, отсортировать, и либо создать новый Map из оного, либо заново добавить все значения в исходный, предварительно тот очистив.
Если ключи заранее известны, то лучше подготовить Map заранее с пустыми значениями - перезапись не меняет порядок.

Локальные стили - локальные, глобальные стили - глобальные. Vue не подключает туда-сюда файлы стилей по мере появления компонентов на странице - это было бы адски жирно и накладно по вычислениям. Стили просто есть: локальные(scoped) с префиксом, глобальные без. Стили динамических компонентов подгружаются один раз при первом обращении.

Соответственно, если надо динамически менять стили для bodyв зависимости от присутствия компонента на странице(я правильно понял?) - делай это руками: добавляй body класс на created, убирай на destroyed.

Тут понадобится немного магии:

type ClearIndex<T> = {
  [ P in keyof T as string extends P ? never : P ] : T[P]
};
class FOO implements ClearIndex<Service_FOO > {
    methodFoo() {}
}

Суть проблемы в том что Record<string, () => void> имеет "index signature", т.е. заявляет, что обращение по любому ключу stringвернёт () => void.
Service_FOO расширяет этот тип(а не сужает), потому Service_FOO имеет ту же index signature и уточнённый конкретный метод.
Класс же в ts не может иметь index signature, т.к. является строгой и конкретной структурой.

На сервере. Сервер должен адресовать все вызовы на index.html, чтоб уже там включился в работу vue-router. Как настроить для своего сервера гулуить "vue router <имя сервера>".

Вариант по-проще и по-ленивее: переключить роутер из режима history в hash. Ссылки, конечно, будут некрасивыми, но зато сразу заработает где угодно.

Вариант по-сложнее: настроить SSR.

Правильный ответ: не надо этого делать. Каждый компонент - чёрный ящик. Ты не знаешь что там внутри и какие там рефы наблюдая из родителя. В этом суть компонентного подхода - в любой момент можно без проблем кардинально менять содержимое компонента, не меня его свойства.

Плохой ответ: самым очевидным образом: получить ref на ребёнка и в свою очередь забрать ref у него: this.$refs.child.$refs.childOfChild.
Возможно придётся также дождаться загрузки ребёнка, если он лежит в scoped слоте.

Если разные версии одних и тех же компонентов(различающихся только внутри но имеющих идентичный интерфейс), то можно просто использовать алиасы, типа:

alias: { 
  '@component-1': {
    'site1': path.resolve(__dirname, './site1/component-1.vue'),
    'site2': path.resolve(__dirname, './site2/component-1.vue'),
  }[process.env.TARGET]
}

import Component1 from '@component-1';
Это если не билдить лишнего. А так, если размер не критичен, можно просто использовать конфиг-файл и <component :is="var"/>.