0xD34F

Устанавливаете null в качестве начальных значений accounts и transactions. В шаблоне добавляете v-if="accounts" и v-if="transactions" тем блокам, внутри которых рендерятся элементы на основе соответствующих свойств.

Является ли нормальной практикой создание нового метода , включающего в себя эти три метода

Если вам надо эти методы вот так вот вызывать в нескольких местах - определённо стоит сделать.

Но если случай единичный, можно просто передать в качестве коллбека функцию, которая будет содержать вызовы нужных методов. Типа так:

buildButton(() => {
  this.drawSomeButtons();
  this.changeSomeVariables();
  this.doSomethingElse();
});

Надо использовать ленивый квантификатор вместо жадного: style=".{0,}?".

https://github.com/search/advanced

Repositories options - Of this size

for (var def = 1; def <= n; n++) {

Может, всё-таки должно быть def++ вместо n++?

Если верить тому, что вы показали в качестве разметки - у вас router-view находится за пределами #app (ну и ещё странность - есть закрывающий тэг header, открывающего нет). Соответственно, отображать компоненты маршрутов попросту негде.

Один x - свойство экземпляра, другой - статический геттер:

class Base {
  constructor() {
    this.x = 3;
  }

  static get x() {
    return 1.5;
  }
}

Классом этой штуке быть не обязательно:

function Base() {
  this.x = 3;
}
Base.x = 1.5;

// или

function Base() {}
Base.prototype.x = 3;
Base.x = 1.5;

UPD. Наконец-то появились статические свойства, а свойства экземпляра стало необязательно инициализировать в конструкторе:

class Base {
  x = 3;

  static x = 1.5;
}

Vue не может отследить прямую установку значения по индексу.

Надо использовать $set, замените

this.steppers[index]=this.steppers[index]+this.step_go

на

this.$set(this.steppers, index, this.steppers[index] + this.step_go)

$str = "философски нагруженная";
preg_match("/.{50}$str.{50}/u", $text, $match);

Получаем массив значений, достаём из него нужный элемент:

const getValue = (obj, index = 0) =>
  Object.values(obj)[index];

Или, перебираем имена свойств, считаем собственные:

function getValue(obj, index = 0) {
  for (const k in obj) {
    if (obj.hasOwnProperty(k) && !index--) {
      return obj[k];
    }
  }
}

Например:

$('.list_add_room').on('click', '.butt_edit', function() {
  const $el = $(this).closest('.item_contain_list').find('p');
  $('.list_add_room [contenteditable="true"]').not($el).removeAttr('contenteditable');
  $el.attr('contenteditable', (i, val) => val !== 'true').focus();
});

Есть ещё и такой вариант - убирать contenteditable при потере фокуса:

$('.list_add_room').on('click', '.butt_edit', function() {
  $(this).closest('.item_contain_list').find('p').attr('contenteditable', 'true').focus();
}).on('blur', '[contenteditable="true"]', function() {
  $(this).removeAttr('contenteditable');
});

Вы пытаетесь назначить обработчик события элементам, которых нет. Нет на момент назначения.

Поставьте код ниже элементов, или оберните его в $(function() { }), или воспользуйтесь делегированием:

$(document).on('change', 'input[type="radio"]', function() {
  $('.color').text($(this).val());
});

я открыл доселе неизвестный it-сообществу баг...

Ага, щас. Десять багов.

... или где-то далеко по мне плачет один учебник по js?

Так точно.

Замените setInterval(this.tick, interval); на

setInterval(this.tick.bind(this), interval);

или на

setInterval(() => this.tick(), interval);

Будем считать, что переменная genre уже в lowercase'е.

document.querySelectorAll('.u-combolist label').forEach(n => {
  if (n.textContent.toLowerCase().indexOf(genre) != -1) {
    n.previousElementSibling.checked = true;
  }
});

или

$('.u-combolist label')
  .filter((i, n) => $(n).text().toLowerCase().includes(genre))
  .prev()
  .prop('checked', true);

const $el = $('.field');
const el = document.querySelector('.field');

Теги должны остаться? Да:

$el.append(document.createTextNode(str));

// или

$el.append(new Text(str));

// или

$el.append(str.replace(/</g, '&lt;'));

// или

el.append(str);

Нет:

$el.append($(str).text());

// или

const div = document.createElement('div');
div.innerHTML = str;
el.insertAdjacentText('beforeend', div.innerText);

// или

el.append(document.createRange().createContextualFragment(str).textContent);

// или

el.append(new DOMParser().parseFromString(str, 'text/html').body.textContent);

Стили для раскрашивания клеток:

.black { background: black; }
.white { background: white; }

Размеры доски:

const rows = 8;
const cols = 8;

Создавать доску можно через генерацию разметки:

document.querySelector('.info').innerHTML = `
  <table>${Array.from({ length: rows }, (_, i) => `
    <tr>${Array.from({ length: cols }, (_, j) => `
      <td class="${(i ^ j) & 1 ? 'black' : 'white'}"></td>`).join('')}
    </tr>`).join('')}
  </table>`;

Или, создавая её элементы напрямую:

const table = document.createElement('table');

for (let i = 0; i < rows; i++) {
  const tr = table.insertRow();
  for (let j = 0; j < cols; j++) {
    tr.insertCell().classList.add([ 'white', 'black' ][(i ^ j) & 1]);
  }
}

document.querySelector('.info').append(table);

например

Анимируйте элементы независимо, вместо общего селектора передавайте в to конкретный элемент. Например:

const
  ease = Power0.easeNone,
  yoyo = true;

document.querySelectorAll('svg').forEach((n, i) => {
  const
    TopWave = new TimelineLite(),
    el = n.querySelector('.wave'),
    delay = i * (1 + Math.random() * 2);

  TopWave
    .to(el, 8, { delay, morphSVG: '.wave-one',   yoyo, ease })
    .to(el, 7, { delay, morphSVG: '.wave-two',   yoyo, ease })
    .to(el, 8, { delay, morphSVG: '.wave-three', yoyo, ease,
      onComplete: () => TopWave.restart()
    });
});

computed: {
  coordinates() {
    return this.$store.getters[`currency/${this.type}`];
  },
},

UPD.

передаю type: <component :type=" 'string' "></compontent>

А зачем такие сложности? Достаточно просто type="string".

.test1, .test2, .test3 - убрать цифры, пусть везде будет просто .test

const wrapper = document.querySelector('.wrapper');

wrapper.addEventListener('click', ({ target: t }) => {
  const { test } = t.dataset;
  if (test) {
    const toRemove = Array
      .from(t.closest('.test').children, n => n.dataset.test)
      .filter(n => n !== test);

    wrapper.classList.remove(...toRemove);
    wrapper.classList.toggle(test);

    document.querySelector('#classlist').innerHTML = wrapper.classList;
  }
});