Aetae

app.component('MyComponent', MyComponent) 0_o

...продолжая из комментов:
Grione, эти данные приходят как?
В json?
Тогда единственный разумный вариант - пусть бэк переделывает и отправляет сразу строку.

В каком-то своём формате?
Тогда сам читай его сразу как строку.

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

function monkeyParse(responseText) {
  responseText = responseText
    .replace(/("field-name"\s*:\s*)(\d(?:\.\d+)?)/g, '$1"$2"');
  return JSON.parse(responseText);
}
monkeyParse('{ "field-name": 1.1000 }'); // { "field-name": "1.1000" }

Но это совсем уж небезопасная какашка.:)

В таком виде оптимально это никак не сделать, только с полным перебором записей каждый божий раз, как предлагает 0xD34F.

Оптимальнее же сделать можно изменив структуру на:

{
  "tags": {
    "юр": 2,
    "зозпп": 1,
    "файл": 1,
    "пароль": 1,
    "сервер": 1
  },
  "data": [
    {
      "title": "заголовок 1",
      "content": "запись 1",
      "tags": [
        "юр",
        "зозпп"
      ]
    },
    {
      "title": "заголовок 2",
      "content": "запись 2",
      "tags": [
        "юр"
      ]
    },
    {
      "title": "заголовок 3",
      "content": "запись 3",
      "tags": [
        "файл",
        "пароль",
        "сервер"
      ]
    }
  ]
}

Тогда при добавлении записи просто плюсуете количество использований тэга, при удалении минусуете. Если стало 0 - удаляете.

Хотя, конечно, если всё это на простых файликах и всё равно грузится в память - смысла слишком оптимизировать тут никакого нет.:)

function findLink(text) {
  for (const a of document.querySelectorAll('.amt-link > a:not(._lock-time)')) {
    if (a.textContent.trim() === text)
      return a.href;
  }
  return '';
}
findLink("Ярость богов")

Никак. Пользователь сам решает, что ему делать.
Ты можешь только запилить большую красивую кнопку "Обновить", чтоб ему захотелось нажать на неё, а не на стандартную.:)

Вопрос мутный как и весь vue 3. :)
Если в React можно однозначно сказать ДА, с Vue, увы, так не получится, потому что много народу не отказалось и отказываться от options api не будет.

Почему так? А потому, что в отличие от React - в vue options api на порядок удобнее и проще как в освоении так и в применении(особенно с классовыми компонентами), при том не имеет никаких действительно критических недостатков.
Composition api же тут решают "проблему" которая и не встретится 99% пользователей(собственно завозит сложную перекрёстную композицию кусочков компонентов), при этом привносит кучу излишней сложности и микроконтроля(а также мерзкий синтаксис).

Официальная позиция: composition api - будущее, всё остальное фигня. Большинство библиотек также ориентируется на composition api. На практике же этого будущего можно и не дождаться.:)

В общем учи всё, благо более-менее просто.

Ну какбэ есть всего два подхода:
1. Свой формат: классика типа bb-тегов или даже тупо markdown. Формат строгий а потому никаких проблем, кроме ограниченности.
2. Чищеный html: если будешь сам велосипедить "очищалку" - гарантировано поимеешь дырки в безопасности, а если использовать какую-то проверенную и поддерживаемую либу - то шанс попасть минимален.

Использовать json'чик с данными разбитыми по частям можно, но для постов произвольной и вариативной начинки это бессмысленно всё усложнит. Такое используется обычно как связка: конкретные данные + форм-генератор строящий интерфейс по схеме.

Поменять кавычки с " на `, которые включают режим шаблонных строк.

Но ващет проще document.querySelectorAll и перебрать уже как массив, без таких извращений.

"items": arr.map((values) => ({ values })),

Ну или:

"items": arr.map((values) => ({ values: values.slice(0, 9) })),

если тебе нужны только первые 9 значений из каждого.

Сделать то можно, например так:

const moveQueue = {
  queue: [],
  index: 0,
  create() {
    let endMoveCallback;
    // создаём висячий промис и присваиваем его разрешение в endMoveCallback
    const movePending = new Promise(resolve => endMoveCallback = resolve);
    // index чисто для лога
    endMoveCallback.index = this.index++; 
    // добавляем в очередь
    this.queue.push(endMoveCallback);
    // возвращаем проис ждущий вызова endMoveCallback
    return movePending;
  },
  last() {
    // забираем из очереди последнее добавленное
    return this.queue.pop();
  }
}

async function turn() {
  await startMove();
  await startShoot();
}

function startMove() {
  console.log('startMove', moveQueue.index);

  return moveQueue.create();
}

function endMove() {
  const activeMoveEnd = moveQueue.last();
  if (activeMoveEnd) {

    console.log('endMove', activeMoveEnd.index)

    activeMoveEnd();
  } else {
    onsole.error('`endMove` called when there are no active moves')
  }
}

function startShoot() {
  console.log('startShoot');
}

turn();
setTimeout(() => endMove(), 1000)

Но скорее всего у тебя что-то не то с архитектурой, и тебе лучше будет почитать книжки по геймдеву.

.main-container
  display: flex
.content
  flex: auto

Проблема то в чём?

Ну какбэ в чём проблема то?

let lineNumber = 0;
rl.on("line", (input) => {
  lineNumber++;
  ...
  if(lineNumber >= 2) rl.close();
});

Или типа того.

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

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

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