0xD34F

data = data.reduce({}){|acc, (k, v)| acc.update(v['child'] || {k => v})}

Потому что parseInt('') будет NaN.

При суммировании подставляйте 0 вместо мусорных результатов парсинга, замените parseInt($(this).val()) на parseInt($(this).val()) || 0.

https://jsfiddle.net/xw6acvnb/

Как достать текст из элемента:

const getText = el => el.textContent;
// или
const getText = el => el.innerText;
// или
const getText = el => el.innerHTML;
// или
const getText = el => el.lastChild.nodeValue;
// или
const getText = el => el.childNodes[0].data;

Как вырезать из текста нужный кусок:

const getValue = text => text.match(/"(.*?)"/)[1];
// или
const getValue = text => text.split('"').slice(-2).shift();
// или
const getValue = text => text.replace(/^.*?"|"[^"]*$/g, '');
//
const getValue = text => `${/(?<=")[^"]+/.exec(text)}`;
// или
const getValue = text =>
  JSON.parse(text.slice(-~text.indexOf('['), text.indexOf(']')));

Как обработать клики:

document.querySelectorAll('li button').forEach(function(n) {
  n.addEventListener('click', this);
}, e => console.log(getValue(getText(e.target))));

// или

document.querySelector('ul').addEventListener('click', ({ target: t }) => {
  if (t.tagName === 'BUTTON') {
    console.log(getValue(getText(t)));
  }
});

вижу, что в строке 16 там идет запись в параметр binding

Где вы там такое увидели, непонятно. Вызов параметра-функции - это никакая не "запись в параметр".

{{:~root.вашеСвойство}}

v-for="i in количествоИтераций"

https://jsfiddle.net/pbLw3dr4/

Очевидно, с помощью одной строковой переменной задать цвет нескольких блоков затруднительно.

Пусть будет массив, элементы которого задают цвет отдельных блоков:

data: () => ({
  items: Array(10).fill(null),
  ...

<ul>
  <li v-for="(n, i) in items" :style="index < i || { color: n }">
    {{ i }}
  </li>
</ul>

Копипастить кнопки и методы для переключения цвета не очень здорово - что если цветов будет не два, а пять? Десять? Сорок? Сделаете сорок разных методов и вручную напишите разметку для сорока кнопок?

Метод оставьте один, а устанавливаемый цвет сделайте его параметром:

methods: {
  next(color) {
    const { index, items } = this;
    this.index = index === items.length - 1 ? 0 : index + 1;
    items.splice(this.index, 1, color);
  },
  ...

А доступные для назначения цвета складываете в массив, на основе которого создаются кнопки:

data: () => ({
  colors: [ 'red', 'lime', 'blue', 'orange', 'magenta', 'aqua', 'yellow' ],
  ...

<button v-for="c in colors" @click="next(c)">{{ c }}</button>

https://jsfiddle.net/wcjkft23/

headerObj.offsetTop

Бессмысленная операция. Этот headerObj - совсем не тот, что в iframe'е. Лучше при клике в списке получайте индекс кликнутого элемента, и берите в iframe'е заголовок с таким же индексом.

const frame = document.getElementsByTagName('iframe')[0];

Вот такого не надо. Используйте useRef - получаете ссылку на экземпляр своего редактора, у него там свойство document есть, нужного вам iframe'а.

UPD. https://codesandbox.io/s/j3oy0q1219

const getShowPaths = (obj, path = '') => Object
  .entries(obj || {})
  .filter(n => n[1].show)
  .reduce((acc, n) => {
    const p = path ? `${path}.child.${n[0]}` : n[0];
    return acc.concat(p, ...getShowPaths(n[1].child, p));
  }, []);


const result = getShowPaths(obj);

$data = array_reduce(explode('/', $str), function($acc, $n) {
  list($key, $values) = explode('-is-', $n);
  $acc[$key] = explode('-or-', $values);
  return $acc;
}, []);

https://v2.vuejs.org/v2/api/#v-cloak

Не надо наследования. Делайте обёртку для основного компонента, которая будет передавать новый обработчик в качестве параметра. А основной компонент будет устанавливать переданный обработчик, или, если его нет, собственный. Например.

for (const num of array) {
  await ctx.reply(num);
}

https://jsfiddle.net/zvyxeu48/

Посчитать суммы соседних элементов можно так:

const sums = arr.reduce((acc, n, i) => (
  (i & 1) || acc.push(0),
  acc[acc.length - 1] += n,
  acc
), []);

// или

const sums = arr.reduce(
  (acc, n, i) => (acc[i / 2 | 0] += n, acc),
  Array(Math.ceil(arr.length / 2)).fill(0)
);

// или

const sums = Array.from(
  { length: arr.length / 2 + arr.length % 2 },
  (n, i) => arr[i * 2] + (arr[i * 2 + 1] || 0)
);

// или

const sums = eval(`[${arr}]`.replace(/(\d+),(\d+)/g, '$1+$2'));

А собрать из массива строку так:

const result = sums.join(' ');

// или

const result = sums.reduce((acc, n) => acc + (acc && ' ') + n, '');

// или

const result = ''.concat(...sums.flatMap((n, i) => i ? [ ' ', n ] : n));

// или

const result = String(sums).replace(/,/g, ' ');

const { function1, function2 } = (function() {
  function unsafe() {}

  return {
    function1() {},
    function2() {},
  };
})();

Можно ли получать высшее образование, не имея среднего? Очевидно, нет. А осваивать фронтенд-фреймворк, не имея базовых знаний html/js? Судя по показанному коду, вы не в курсе, что атрибуты id должны иметь уникальные значения (<span id="wrong"> в шаблоне компонента - а если экземпляров компонента будет несколько?), путаетесь с операторами - использовали побитовое ИЛИ там, где должно было быть логическое. Может, стоит подождать с vue и подтянуть основы?

А если отвечать непосредственно на ваш вопрос... Ну, держите.

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

Object.assign({}, ...Object.values(obj).flat())