Aetae

Поставь node js lts. С этого начинается любая фронт разработка.)

https://vue-i18n.intlify.dev/installation.html#es-...
yarn add vue-i18n@next

Не изменил версию, потому что tar "6.0.2", а не tar "^6.0.2".
А в целом - забейте болт.
1. Большинство уязвимостей находятся в либах, использующихся вами локально для сборки, а сами себя вы ломать будете.
2. Vue исполняется на клиенте и всё эти уязвимости в любом случае не имеют никакого значения, даже если окажутся в рабочем коде.

Внимательней к этому стоит присмотреться только когда начнёте писать сервер на node.js.

P.S. Если очень хочется - можно воспользоваться yarn resolutions и захардпатчить версии зависимостей. Но никто тогда вам не гарантирует корректную работу.

Элементарно, вот те на коленке накидал:


Только он не учитывает кучу всяких edge-case, самое очевидное: изменения ширины в процессе работы - следует добавить ещё обёртку и ResizeObserver.
Но и не очевидных там много, потому для таких вещей обычно используют готовые либы.)

Vue использует webpack, а webpack использует для запросов конкретные пути, которые ты указываешь при билде.

Решение в лоб: особый билд для cdn, где параметр publicPatch указывает на соответствующий сайт.
Решение хитрое: webpack позволяет менять публичный путь динамически, присваивая его переменной __webpack_public_path__. Остаётся только при старте приложения получить путь к скрипту, например из document.currentScript, выделить из него нужный путь и присвоить его.

Если вопрос про прод: настроить сервер, чтоб сначала отдавал /api откуда надо, а только потом заворачивал все запросы на index.html.

Если вопрос про разработку: в vue-cli используется webpack dev server, и там есть proxy, через который вы можете направить запросы с /api на свои боевые или локальные сервера.

Ну ёпрст.

const dateTimeLocal = reactive({
  day: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"],
  hour: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"],
  minute: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"],
  second: ["00", "01", "02", "03", "04", "05", "06", "07", "08", "09"],
});

P.S. Это Vue 2 не мог отслеживать добавление новых ключей, Vue 3 же может всё, если не забыть его об этом попросить.

Во-первых: тебе намекнули уже в комментах:

computed свойства в vue пересчитываются когда меняются их реактивные зависимости, которые участвовали в предыдущих вычислениях

Т.е. на пальцах: ты обратился в computed к this.value - теперь он смотрит за изменениями this.value. Твоё же computed ни к чему не обращается, оно просто возвращает функцию, её содержимое и вызовы к computed не относятся.

Для понимания:
Вот этот твой код:

computed: {
  validatedClass() {
    return (input) => {
      return {
        'uk-form-success': this.wasValidated && !this.errors[input],
        'uk-form-danger': this.wasValidated && this.errors[input],
      }
    }
  }
},

равносилен:

function someRandomFunction(input) => {
  return {
    'uk-form-success': this.wasValidated && !this.errors[input],
    'uk-form-danger': this.wasValidated && this.errors[input],
  }
}
computed: {
  validatedClass() {
    return someFunction.bind(this);
  }
},

Такой computed будет обновлён только когда Vue пошлёт. В идеале, на самом деле, никогда.

По сути ты просто написал обычный метод, но через одно место.)

Во-вторых: проблема у тебя в другом: this.errors = {}.
Из-за ограниченных возможностей сеттеров, новые ключи, добавленные в объект таким образомthis.errors.email = [] - не реактивны.
Добавлять ключи надо либо черезthis.$set(this.errors, 'email', []) либо, что лучше, заранее:

this.errors = {
  email: '',
  // ...
}

Ну и в третьих: менять что-то в this.$children - очень очень очень плохо. Просто используй props. Такая возможность наличествует только для крайне сложных случаев в компонентах библиотек. Точно не для твоего.

В первом случае вы в теории тащите весь bootstrap во втором только modal. Однако на деле нет никакой разницы, потому что все популярные системы сборки умеют в tree-shaking, т.е. оставляют в бандле только то, что используется.
Разницы в скорости нет.

Единственное что вам следует выбрать один вариант и ему следовать, иначе в случае bootstrap получится дублирование кода. Что кстати странно, обычно корневой файл содержит просто реэкспорт тех же самых отдельных модулей, а не копии.

computed: {
  mergedOptions() {
    return {
      ...this.data,
      ...this.options
    }
  }
}

<third-part-component :options="mergedOptions" />
?

У тебя publicPath относительный, а для history нужен абсолютный.

При чём тут Vue? Ты выводишь массив - тебе показывают массив.
Хочешь чтоб была строка - сделай из массива строку. Хотя бы через .toString(), или как либо более специфично.

Какие проблемы?

created() {
  if(mobile){
    this.touchStart = () => {}
  }
}

Но поскольку mobile или не mobile определяется один раз в жизни приложения, то логичней вынести определение функций\методов в отдельный файл, типа:

let touchStart;
if(mobile){
  touchStart = function() {}
} else {
  touchStart = function() {}
}

export {
  touchStart
}

import {touchStart, ...} from './helpers';
methods: {
  touchStart,
  ...
}

Либо как миксин:

const touchMixin = {
  methods: mobile ? {
    touchStart() {}
  } : {
    touchStart() {}
  }
}

mixins: [touchMixin],

Если это именно то, чего ты хочешь, то ты можешь сделать себе очередь, условно так:

class AsyncQueue {
  constructor(result) {
    this.queue = [];
    this.result = result;
  }
  isStreaming = false;
  add(promise) {
    this.queue.push(promise);
    if(!this.isStreaming)
      this.stream();
  }
  async stream() {
    this.isStreaming = true;
    for await (const result of this.queue) {
      this.result(result);
    }
    this.queue.length = 0;
    this.isStreaming = false;
  }
}

Vue:

data() {
  const schedulesQueue = new AsyncQueue(this.showLoadedSchedules);
  return {
    schedulesQueue,
    // ...
  }
},

methods: {
  showLoadedSchedules(response) {
    if(this.curDateEvent) {
      this.changeMobileDay(this.curDateEvent);
    }
    // ...
  },
  addSchedulesToQueue(locationId, gameModeId, selectedHeadsets, day) {
    let param = 'locationId=' + locationId + '&gameModeId=' + gameModeId + '&headsets=' + selectedHeadsets

    if (day)
      param += '&day=' + day;

    return this.schedulesQueue.add(
      axios({
        method: 'get',
        url: 'schedules?' + param
      }).catch((error) => {})
    );
  }
}

Тебе надо изучить, что такое асинхронность, что такое Promise, что такое async\await. Без этого ты никуда не уедешь.

Тебе надо делать либо так: this.svg = await getFileContent(url), либо так
getFileContent(url).then(a => this.svg = a).

Promise всегда возвращает Promise. Тебе надо дождаться выполнения Promise'а тем или иным способом.
Если ты делаешь так this.svg = getFileContent(url) - конечно у тебя в this.svg лежит Promise. Этот Promise только начинает выполнение и никаких данных там нет. Данные в него прилетят возможно через час, если ты на модеме.

К Vue вопрос отношение не имеет.