Aetae

<div
  v-for="item in splitComments"
  :key="item.id"
  class="comment-item"
>
  ...
  <span 
    class="comment-text" 
    v-for="(str, i) in item.textList" 
    :class="{highlight: i%2}"
  > 
      {{ str }} 
  </span>
</div>

computed: {
  splitComments() {
    return this.comments.map(item => ({
      ...item,
      textList: item.text.split(/(@\S+)/)
    }))
  }
}

В ошибке всё сказано:

Expected Boolean, got Object

Не знаешь английский - используй гугл транслейт:

Жду Boolean, а ты мне суёшь Object

:exact="index === 0"

Со времён vue 2 ничего не поменялось: тебе нужен name:

Поставь 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],