Aetae

@:click -> @click, соответственно, не: @:keyup.enter, а @keyup.enter

Ну и не относится к проблеме, но красивее писать так:
@click="add()" -> @click="add"

Никак.
По умолчанию, без специальных ухищрений, javascript работает в одном потоке.
Пока цикл не завершится - вообще больше ничего не произойдёт, в т.ч. реакция на клик - страница тупо "зависает".

Вот навскидку накидал франкенштейна(больше под свои задачи):

function escapeRegExp(string) {
  return String(string).replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}
// для оптимизации неплохо бы завернуть в memoize-one
const toSpacedRegExp = (needle, ignoreCase = true) => new RegExp(
  needle
  .trim()
  .split(/\s+/)
  .map(chunk => '(' + escapeRegExp(chunk) + ')')
  .join('(\\S*(?:\\s+\\S*)+?)'), 
  ignoreCase ? 'i' : ''
);
// для оптимизации неплохо бы завернуть в memoize-one
const toSomeRegExp = (needle, ignoreCase = true) => new RegExp(
  needle
  .trim()
  .split(/\s+/)
  .map(chunk => '(' + escapeRegExp(chunk) + ')')
  .join('([\\S\\s]*)'), 
  ignoreCase ? 'i' : ''
);

// Возвращает либо false, либо массив разделённых совпадний
// smartFind('start found rest', 'found') // ['start ', 'found', ' rest']
// smartFind('start found rest', 'start') // ['', 'start', ' found rest']
// удобно для подсвечивания найденного тупо через i % 2
function smartFind(haystack, needle) {
  if (!haystack) return false;
  if (!needle) return ['', haystack, ''];

  // ищем сначала разделённые пробелами: ва ся => ВАся СЯпкин
  let result = haystack.split(toSpacedRegExp(needle));
  if (result.length > 1) return result;

  // ищем хоть какое-то совпадение: ва ся => ВАСЯ пупкин
  result = haystack.split(toSomeRegExp(needle));
  return result.length > 1 && result;
}

По ключевым словам "fuzzy search" можно найти куда оптимальнее и красивее вещи, но тут уж сам.:)

Вот например сайт icio.us на http(хз что за сайт, нагуглен из списка "popular websites loaded insecurely") , прекрасно грузит иконку сверху слева.
Так что это не стандартное поведение браузера.

Дайте ссылку на ваш сайт или хотя-бы запросите картинку с вашего сервера руками и покажите какие заголовки он отдаёт.

Пока единственное разумное предположение, что там вместо image/<что-то> идёт какая-то ересь и браузер решает попытать счастья на https. Тогда надо поправить MIME types на сервере.

Ещё вариант, что на сайте когда-то был https с включенным HSTS. Тогда надо руками удалить из браузера сохранённую метку.

Но это всё гадание на кофейной гуще.

Поменяй: props.item.office на 'office' in props.item.
Ты не можешь обращаться к свойству которого нет сразу во всех типах union'a. Но ты можешь проверить его наличие, а дальше ts, в зависимости от результата, сузит тип до того, в котором оно присутствует.

Преобразует любые на входе в универсальные:

class CompatibleBounds {
  northEast = [0, 0];
  southWest = [0, 0];

  constructor(bounds) {
    Object.assign(this, bounds);
  }

  static new(bounds) {
    return new this(bounds);
  }

  get south(){ return this.southWest[1] }
  get west(){ return this.southWest[0] }
  get north(){ return this.northEast[1] }
  get east(){ return this.northEast[0] }
  set south(value){ this.southWest[1] = value }
  set west(value){ this.southWest[0] = value }
  set north(value){ this.northEast[1] = value }
  set east(value){ this.northEast[0] = value }
}

const compatibleBounds = CompatibleBounds.new({
  "south": 43.106491921792255,
  "west": 76.71745650634767,
  "north": 43.4065384633472,
  "east": 77.13974349365236
});
// или
const compatibleBounds = CompatibleBounds.new({
  "northEast": [
    76.92894332280319,
    43.25695003829279
  ],
  "southWest": [
    76.92825667730312,
    43.256449960663694
  ]
});

// на выходе универсальный динамический объект:
compatibleBounds.southWest = [1, 2];
console.log(compatibleBounds.south); // 2

compatibleBounds.south = 3
console.log(compatibleBounds.southWest); // [1, 3]

Но если действие требуется одноразовые, то лучше руками перегнать один раз.:)

Как уже сказали в комментах: создаёт регулярку с помощью которой можно найти отдельно-стоящее переданное слово(в начале строки, в конце или между пробелами).
Что не сказали:
1. Переданное слово не экранируется на спецсимволы регулярных выражений, потому внезапно может сломаться.
2. Не учитывает знаки препинания(возможно не нужно, если задача специфичкская).

Делая так:
const ThemeProvider: FC = ...;
Ты говоришь ts, что у тебя ThemeProvider имеет тип FC, и пофиг что ты там дальше пишешь. Тип FC по умолчанию не имеет children.

Пиши либо так:
const ThemeProvider: FC<{children: ...}> = ...;

Либо так:
const ThemeProvider = ({ children }: ...) => ...;
* Кстати обрати внимание на деструктуризацию, в react component всегда приходят props, children это поле props, а не верхний аргумент.

Либо так:
const ThemeProvider: FC<PropsWithChildren> = ...
* PropsWithChildren - тип помощник, добавляющий children к объекту, например

PropsWithChildren<{
 prop2: string; 
 prop3: number
}>

но без дженерика просто отдаёт тип вида

{
    children?: ReactNode | undefined;
}

В принципе ts позволяет при желании извратиться и побуквенно наклепать нужные типы:

type Lettrer = 'a' | 'b' | ...
type Digit = 1 | 2 | ...
...

Но делать так, очевидно, не стоит. :)
Оставьте просто string и просто number.
Разве что для удобства чтения и понимания (а также как задел на случай если ts поумнеет в будущем и сможет в более сложные типы) сделайте так:

type ZipCode = string;
type GeoCoord = number;

С одной стороны для кастомных компонентов тебе потребовался бы transformAssetUrls. Однако открыв доки я вижу там:

Converts src to provider optimized URLs

В связи с чем вопрос: а путь то такой вообще работает?
Что будет в img если ты делаешьimport img from '~/assets/images/header.jpg'?

Очевидно transform: rotate(-90deg); и какой-нить transform-origin, наиболее удобный.
Условно так:

Других (адекватных) вариантов собственно и нет.

Подстановка путей к динамическим ассетам осуществляется на этапе сборки. Со строками из js сборка напрямую не работает.

1. Ты можешь сделать так:

import Wordpress from '../assets/wordpress-logotype-wmark.png';
import Bitrix from '@/assets/logotip/1c_bitrix_logo.svg.png';
const brandImgs = {
  '1C Bitrix': Bitrix,
  Wordpress,
};

По сути сделать руками то, что делает сборщик vue с src под капотом.

2. Ты можешь просто сразу положить иконки в папку /public и указывать не относительные пути в рамках проекта, а абсолютные от корня:

const brandImgs = {
  '1C Bitrix': '/logotip/1c_bitrix_logo.svg.png',
  'Wordpress': '/logotip/wordpress-logotype-wmark.png',
 };

3. Ты можешь использовать динамический import().

4. Ты можешь использовать import.meta.glob в vite или require.context в webpack.
(Тут стоит помнить, что все ограничения упомянутые для п.3 применимы и здесь.)

Используй getters, оно именно для этого и предназначено. Точно также как computed в самом vue.

export default createStore({
  state: {
    list1: [],
  },
  getters: {
    list2(state) {
      return state.list1.filter(...) 
    }
  }
})

P.S. И да, нахрен vuex, используй pinia.

Ну так а с чего бы ему что-то прижимать? Они вообще в разных блоках и никак не связаны.
Ну и flex-grow это не про "прижимание", это про "заполнение имеющегося места".

Чтобы что-то "прижимало" .twitter_swipe тебе надо .twitter__row слать flex column, не забыть задать высоту и задать уже для .twitter__body flex-grow.

Если ты не используешь SSR, то тебе достаточно просто reactive/ref объекта, чтоб получить эрзац-стор, тупо:

// где-нибудь 
export const basket = reactive([]); // или ref([]) по вкусу. 
// везде где надо
import { basket } from './...'

Реактивность будет прекрасно работать.

Почему кто-то использует специальные store если можно делать так? Потому что сторы учитывают работу в режиме SSR, а также позволяют удобную отладку в случае множества запутанных связей.
Вам я бы тоже рекомендовал использовать таки store - только pinia, а не vuex. Не вижу причин его не использовать.

По поводу EventBus: с одной стороны новичку её использовать категорически не рекомендуется, т.к. работа со store куда удобнее, очевиднее и надёжнее. Однако и совсем отрицать её использование тоже не следует, шина отлично подходит для случаев когда мы имеем дело именно с событиями, а не изменением состояния. Т.е. послать какой-нить notification или лог - самое оно, использовать для изменения basket, как в вашем случае - нет.