VegasChickiChicki

Здесь только регуляркой или как?

Конечно, использовать регулярные выражения не обязательно:

function incrementNumberInString(str) {
  for (let i = 0, iNum = -1; i < str.length; i++) {
    if ('0123456789'.includes(str[i])) {
      if (iNum === -1 && str[i - 1] === '[') {
        iNum = i;           
      }
    } else if (iNum !== -1 && str[i] === ']') {
      return str.slice(0, iNum) + (Number(str.slice(iNum, i)) + 1) + str.slice(i);
    } else {
      iNum = -1;
    }
  }

  return str;
}

Но с ними будет гораздо проще:

str.replace(/(?<=\[)\d+(?=\])/, m => ++m)
// или
str.replace(/\[\d+\]/, m => '[' + (m.slice(1, -1) - -1) + ']')
// или
str.replace(/\[(\d+)\]/, (m, g1) => `[${-~g1}]`)

не стоит удивляться: в таких вакансиях расставляют требования точно так же как и вы теги к своему вопросу.

Ctrl+Shift+-

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

div2.style = 'background:red';//должно выполниться первым
let info = document.querySelector('#info');
async function myFunc() {
  await sleep(1000);
  info.innerHTML = 'Привет!';//должно выполниться вторым
  await sleep(1000);
  div1.style = 'background:green';
}

myFunc();

Сам по себе localStorage не реактивен, так что ваш computed не имеет особого смысла.

По-хорошему token просто надо хранить в рективном store(не обязательно vuex, можно просто observable), и во всех местах получать и класть его через этот store. Тогда всё будет работать из коробки.
Если же в localStorage token прилетает откуда-то сам, то придётся вам повесить событие onstorage и отлавливать изменения вручную в нужных местах.

async fn(raz,dva,tri) {
  await первое действие {count: raz};
  await второе действие {num: dva};
  await третье действие {sum: tri};
}

Так понятнее?

let song = ",WE,ARE,,THE,CHAMPIONS,MY,FRIEND,"
song = song.split(",");

вы Vue документацию хоть смотрели, или чем не подошёл этот пример?
https://ru.vuejs.org/v2/examples/tree-view.html

this

Ну что тебе подсказать? Подсказать освоить нужные технологии? Подсказать биржу фриланса, если первое не подходит? Ты ждёшь, что тебе сейчас по картинке готовый пример дадут? Что ты хочешь то?

by Pardon Me! Where Do I Find 4giveness?

Используйте отдельные поля data для состояния модалки, а при открытии/закрытии синхронизируйте с основными

https://w3c.github.io/preload/

Example directives to preload a resource that will be consumed by...

consumer	Preload directive
<audio>	<link rel=preload as=audio href=...>
<video>	<link rel=preload as=video href=...>
<track>	<link rel=preload as=track href=...>
<script>, Worker's importScripts	<link rel=preload as=script href=...>
<link rel=stylesheet>, CSS @import	<link rel=preload as=style href=...>
CSS @font-face	<link rel=preload as=font href=...>
<img>, <picture>, srcset, imageset	<link rel=preload as=image href=...>
SVG's <image>, CSS *-image	<link rel=preload as=image href=...>
XHR, fetch	<link rel=preload as=fetch crossorigin href=...>
Worker, SharedWorker	<link rel=preload as=worker href=...>
<embed>	<link rel=preload as=embed href=...>
<object>	<link rel=preload as=object href=...>
<iframe>, <frame>	<link rel=preload as=document href=...>

button.onclick = function(e){
//меняем цвет
}
document.onclick = function(e){
if(e.target != button) //ставим другой цвет
}

Условия типа e.target.classList.contains() могут не срабатывать, если в кнопке есть картинка или другой элемент. Поэтому попробуйте еще e.target.closest('СЕЛЕКТОР КНОПКИ') в условиях.

Легко и просто! На чистом CSS сделал: https://codepen.io/CitizenOne/pen/abzOJYK

Можно даже без FLEX сделать

держи