0xD34F

Свойства tickPixelInterval, tickPositions. Например.

почему-то не отрабатывает ни один из хуков

Вот ведь чудеса какие. А может эти хуки, ну они, как бы это сказать... это самое... А ВДРУГ ИХ НЕТ??!

Идём на гитхаб, смотрим чо как - действительно, нет. И нет давно - с февраля позапрошлого года. Там же, на гитхабе, смотрим актуальную версию API. Если я правильно понял - то, что вам нужно называется onHasTask. Исправляем код, и...

Если делать ровно то, что спрошено:

const rootComments = Object
  .entries(comments)
  .reduce((acc, [ k, v ]) => v.parent === null ? { ...acc, [k]: v } : acc, {});

// или

const rootComments = {};
for (const k of Object.keys(comments)) {
  if (comments[k].parent === null) {
    rootComments[k] = comments[k];
  }
}

Но вообще, можно решить более общую задачу - собрать дерево. Которое и будет тем результатом, который вам требуется - объектом, содержащим корневые узлы (конечно, не без дополнения в виде объектов вложенных узлов):

function createTree({
  data,
  key = 'id',
  parentKey = 'parentId',
  childrenKey = 'children',
}) {
  const tree = data.reduce((acc, n) => (
    acc[n[key]] = { ...n, [childrenKey]: {} },
    acc
  ), {});

  return Object.values(tree).reduce((acc, n) => {
    const p = tree[n[parentKey]];
    (p ? p[childrenKey] : acc)[n[key]] = n;
    return acc;
  }, {});
}

const commentsTree = createTree({
  data: Object.values(comments),
  parentKey: 'parent',
});

chart.js

$digits = str_split($number);

$average = array_sum($digits) / count($digits);

preg_match('/ИНН: (\d+)/', $str, $match);
$inn = $match[1];

<button class="click-count">click me</button>
<button class="click-count">click me</button>
<button class="click-count">click me</button>

document.addEventListener('click', ({ target: t }) => {
  if (t.classList.contains('click-count')) {
    t.innerText = (t.innerText | 0) + 1;
  }
});

// или

const onClick = e => e.target.textContent = -~e.target.textContent;
document.querySelectorAll('.click-count').forEach(n => n.addEventListener('click', onClick));

Во-первых - почему вместо animate используете attr (gr1/2)?

Во-вторых - почему передаёте функции вместо объектов в animate (path1/2/3/4)?

Исправлено.

если написать в render то он до отрисовки сделает скролл
componentDidMount вообще один раз сработает после отрисовки страницы

Я слышал, будто бы ещё есть какой-то componentDidUpdate - делайте свой скролл в нём.

Есть ощущение, что я что-то в доках базовое пропустил

Может is?

метод animate, например

Что если заменить

.imageContainer:empty {
  height: 0;
  border: none;
}

на

.imageContainer:empty {
  visibility: hidden;
  /* или */
  opacity: 0;
}

??

UPD. Или, добавить box-sizing: border-box; для .imageContainer.

UPD. Или, заменить flex на grid - убрать flex: 0 0 30%; у .imageContainer, а у их родителя пусть будет так:

display: grid;
grid-template-columns: repeat(3, 30%);
justify-content: space-between;

Ну, во-первых не метод, а свойство.

А во-вторых - всё-таки так, undefined. Вы монтируете второй экземпляр Vue внутрь первого. Зачем вам такое могло понадобиться - лично мне фантазии представить не хватает. Первый экземпляр при компиляции конечно же обрабатывает ту часть шаблона, которая по вашей мысли предназначена для второго. Отсюда и ошибки - у первого экземпляра нет тех свойств, которые есть у второго, и которые используются в шаблоне.

Что делать? Ну, первый вариант очевиден - избавьтесь от второго экземпляра Vue, перенесите его данные в первый, или сделайте отдельный компонент - это уж вам виднее. Второй, это если вам вот прям кровь из носу надо чтобы экземпляров было два и один монтировался внутрь другого - используйте v-pre (опасно, если при обновлении внешнего экземпляра окажется затронут элемент, к которому примонтирован внутренний - внутренний экземпляр отвалится).

Добавьте в App:

beforeRouteEnter(to, from, next) {
  if (store.getters.user) {
    next(false)
  } else {
    next()
  }
}

<section id="app-pro">     
      <router-view></router-view>
</section>

new Vue({
  el: '#app-pro',
  render: h => h(AppPro),
  router
}).$mount('#app-pro')

Вы вообще как - понимаете, что тут понаписали? Вопрос риторический - конечно нет, не понимаете. Открываете документацию и читаете - что такое render, el и $mount. Особое внимание обращаете вот на этот фрагмент:

The render function has priority over the render function compiled from template option or in-DOM HTML template of the mounting element which is specified by the el option.

Вот вы вроде бы в курсе, что стейт не следует менять напрямую - а тем не менее это делаете.

Что вы понимаете под "мутабелен" и "иммутабелен" по отношению к методам массива я не знаю, и знать не хочу. Но могу точно сказать - не то, что надо. Вам явно стоит заглянуть сюда.

Делайте копию массива перед splice'ом, и сам splice выполняйте над копией - так же, как push при добавлении элемента.

Кстати, о добавлении - почему у вас там в код метода зашита константа в качестве нового id? Нажали "добавить" два раза - вот и два элемента с одинаковыми id. Неужели так трудно было сгенерировать уникальный? Например.

unix time

Можно повесить обработчик на событие load (нативное, сам компонент событий не генерирует). В обработчике надо проверить, что e.target.src правильный - потому что событие возникает дважды, первый раз при показывании заглушки, второй - когда загружена настоящая картинка. Как-то так.