0xD34F

created() {
  this.chooseChild = Object.values(this.parent)[0];
  this.chooseS = Object.values(this.chooseChild)[0];
  this.showinfo = Object.values(this.chooseS)[0];
},

UPD. А вообще, я бы всё переписал. Хочу, чтобы можно было строить цепочки select'ов произвольной длины.

Вместо отдельных свойств, отвечающих за текущие значения select'ов cделаем массив:

data: () => ({
  selectedValues: [],
  ...

Сделаем вычисляемое свойство, представляющее массивы опций для select'ов и конечное значение. Идём вглубь объекта с данными, используя в качестве ключей выбранные значения:

computed: {
  selectData() {
    const options = [];
    let { items } = this;

    while (items instanceof Object) {
      options.push(Object.keys(items));
      items = items[this.selectedValues[options.length - 1]];
    }

    return {
      options,
      result: items || null,
    };
  },
},

Создадим select'ы и отобразим конечное значение:

<div>
  <select
    v-for="(options, i) in selectData.options"
    v-model="selectedValues[i]"
    @input="selectedValues.length = i"
  >
    <option v-for="n in options">{{ n }}</option>
  </select>
</div>
<div>SELECTED: <b>{{ selectData.result || '&lt; NONE &gt;' }}</b></div>

Чтобы сразу выставить какое-то конечное значение, будем идти вглубь объекта с данными, насколько возможно, всегда выбирая нулевой ключ и помещая его в массив выбранных значений:

created() {
  let { items } = this;
  while (items instanceof Object) {
    const key = Object.keys(items)[0];
    this.selectedValues.push(key);
    items = items[key];
  }
},

https://jsfiddle.net/64m37ng0/

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

Обходите список от конца к началу (типа, range(length - 1, -1, -1)), а ещё лучше вообще не модифицируйте список, а создавайте новый:

sentences = [ n for n in sentences if n ]

Показ/скрытие содержимого details при клике - это поведение по умолчанию, видимо, оно конфликтует с вашими попытками управлять состоянием details. Отменяйте действие по умолчанию при клике:

toggleDetails = (e) => {
  e.preventDefault();
  this.setState({ details: !this.state.details });
}

@media screen and (max-width: 768px) {
  br {
    display: none;
  }
}

function merge(nums1, m, nums2, n) {
  for (let i = m + n, i1 = m - 1, i2 = n - 1; i--;) {
    nums1[i] = i2 < 0 || nums1[i1] > nums2[i2] ? nums1[i1--] : nums2[i2--];
  }
}

function randomCall(items) {
  const max = items.reduce((acc, n) => acc + n.ratio, 0);

  return function(...args) {
    const val = Math.random() * max;
    for (let sum = 0, i = 0; i < items.length; i++) {
      sum += items[i].ratio;
      if (sum > val) {
        return items[i].func.apply(this, args);
      }
    }
  };
}


const func = randomCall([
  { func: func1, ratio: 1 },
  { func: func2, ratio: 2 },
  { func: func3, ratio: 3 },
  { func: func4, ratio: 4 },
]);

https://jsfiddle.net/pgnL6at1/

Рекурсия есть:

function find(data, val) {
  const values = data instanceof Object ? Object.values(data) : [];
  return values.includes(val)
    ? data
    : values.reduce((found, n) => found || find(n, val), null);
}


const obj = find(arrayData, 'myValue');

Рекурсии нет:

function find(data, val) {
  for (const stack = [ data ]; stack.length;) {
    const n = stack.pop();
    if (n instanceof Object) {
      const values = Object.values(n);
      if (values.includes(val)) {
        return n;
      }

      stack.push(...values);
    }
  }

  return null;
}

state = {
  disabled: false,
}

toggle(disabled) {
  this.setState(() => ({ disabled }));
}

onClick = () => {
  this.toggle(true);
  setTimeout(() => this.toggle(false), 2000);
}

<button disabled={this.state.disabled} onClick={this.onClick}>click me</button>

Классы замените data-атрибутом, в зависимости от значения которого будет стилизоваться сам .item, а не вложенные в него элементы:

.item[data-xxx="1"]::before { background: #444; }
.item[data-xxx="2"]::before { background: #555; }
.item[data-xxx="3"]::before { background: #666; }
.item[data-xxx="4"]::before { background: #777; }
.item[data-xxx="5"]::before { background: #888; }
.item[data-xxx="6"]::before { background: #999; }

Соответственно, засовывать шесть div'ов в каждый .item не надо:

$('#counter').on('input', e => {
  $('#results').html('<div class="item"></div>'.repeat(e.target.value));
}).trigger('input');

// или

const results = document.querySelector('#results');
const counter = document.querySelector('#counter');

counter.addEventListener('input', ({ target: { value } }) => {
  results.innerHTML = Array(++value).join('<div class="item"></div>');
});
counter.dispatchEvent(new Event('input'));

Нет div'ов - не надо ни у кого переключать видимость. Достаточно выставить атрибуту случайное значение:

$('#view').on('click', () => $('.item').attr('data-xxx', () => 1 + Math.random() * 6 | 0));

// или

document.querySelector('#view').addEventListener('click', () => {
  document.querySelectorAll('.item').forEach(n => n.dataset.xxx = -~(Math.random() * 6));
});

https://jsfiddle.net/L76mav3t/

preg_match('~(?<=vk\.com/)\S+~', $str, $match);
$group_name = $match[0];

document.querySelector('table').addEventListener('click', ({ target: t }) => {
  const next = t.matches('input[type="button"]') && t.parentNode.nextElementSibling;
  const input = next && next.querySelector('input');
  input && (input.type = 'text');
});

Вместо состояния всех элементов храните имя/id/индекс открытого:

state = {
  opened: null,
}

toggle = ({ target: { dataset: { name } } }) => {
  this.setState(({ opened }) => ({
    opened: opened === name ? null : name,
  }));
}

https://jsfiddle.net/bexgm6uz/

Object.fromEntries((url.match(/(?<=utm_).+?=[^&]*/g) || []).map(n => n.split('=')))

или

[...url.matchAll(/utm_([^=]+)=([^&]*)/g)].reduce((acc, [ , k, v ]) => (acc[k] = v, acc), {})

или

Array
  .from(new URL(url).searchParams)
  .filter(n => n[0].startsWith('utm_'))
  .reduce((acc, n) => ({ ...acc, [n[0].slice(4)]: n[1] }), {})

Что можно сделать:

1. Установить значение select'а: select.value = '0';
   
2. Установить индекс выбранного option'а: select.selectedIndex = 0;
   
3. Назначить true в качестве значения свойства selected тому option'у, на который хотите переключиться:
   
   

   select[0].selected = true;
   // или
   select.options[0].selected = true;
   // или
   select.children[0].selected = true;
   // или
   select.firstElementChild.selected = true;
   // или
   select.querySelector('[selected]').selected = true;

   
   
4. Перезаписать внутреннюю разметку select'а: select.innerHTML += '';
   

Не дублируя код инициализации

Очевидно же - сделать функцию, которая будет принимать id/элемент (контейнер для карты) и данные маркеров.

Храните вместо значения его индекс. При клике увеличивайте его на единицу.

Соответственно, если надо значение показать:

{{ массивВозможныхЗначений[индексЗначения] }}

Ну или, если будете хранить сами значения - при клике ищите индекс значения в массиве, берёте следующее:

следующееЗначение = массивВозможныхЗначений[массивВозможныхЗначений.indexOf(текущееЗначение) + 1]

UPD. Как это может выглядеть: раз, два.

const entries = Object.entries(obj);
const mustBeRemoved = v =>
  (v instanceof Object && !Object.keys(v).length) ||
  (!v && typeof v !== 'boolean');

Собираем новый объект:

const newObj = Object.fromEntries(entries.filter(n => !mustBeRemoved(n[1])));

Удаляем из существующего:

entries.forEach(n => mustBeRemoved(n[1]) && delete obj[n[0]]);

function createTree($data, $depthField) {
  $tree = [];

  foreach ($data as $n) {
    $arr = &$tree;

    for ($depth = 0; $n[$depthField] > $depth; $depth++) {
      $arr = &$arr[count($arr) - 1]['children'];
    }

    $arr[] = array_merge($n, [ 'children' => [] ]);
  }

  return $tree;
}


$tree = createTree($arr, 'depth');

https://jsfiddle.net/gqa2wrkp/

Что и куда будем копировать:

const source = document.querySelector('.box1').children;
const target = document.querySelector('.box2');

Копируем:

target.firstElementChild.insertAdjacentHTML('afterend', Array
  .from(source, ({ innerText: n }) => `<p><a href="#${n}">${n}</a></p>`)
  .join('')
);

или

target.children[0].after(...Array.prototype.map.call(source, ({ textContent: n }) => {
  const p = document.createElement('p');
  const a = document.createElement('a');
  a.href = '#' + n;
  a.textContent = n;
  p.append(a);
  return p;
}));