0xD34F

отследить появление содержимого блока

MutationObserver

Это если нужный блок почему-то находится за пределами корневого элемента вашего приложения. Если же внутри - делайте watch на свойство отвечающее за содержимое блока.

UPD. Набросал примерчик - отслеживание внешнего элемента через MutationObserver, запись значения в Vuex.

Решили попробовать скрывать родительский контейнер компонента через класс с display: none, отрисовывать в скрытый и в mounted снимать скрывающий класс

Вручную возиться с классами не надо, чтобы прятать шаблон до окончания компиляции есть v-cloak.

array_splice($arr, 2, 0, 'Груши');

UPD. Вынесено из комментариев:

А если мы не знаем порядковый номер нового элемента, но знаем после какого элемента будет стоять новый, то как быть?

array_splice($arr, array_search('Виноград', $arr) + 1, 0, 'Груши');

Обновить существующий объект:

for (const k in obj) {
  obj[k] = Object.values(obj[k]);
}

Собрать новый:

const newObj = Object
  .keys(obj)
  .reduce((acc, k) => (acc[k] = Object.values(obj[k]), acc), {});

// или

const newObj = Object.fromEntries(Object
  .entries(obj)
  .map(n => [ n[0], Object.values(n[1]) ])
);

const ul = document.querySelector('#ul');
const button = document.querySelector('#but');

Никаких циклов не надо, достаточно посмотреть сколько уже есть элементов и сделать плюс один:

ul.addEventListener('click', function(e) {
  if (e.target.tagName === 'LI') {
    e.target.textContent += '!';
  }
});

button.addEventListener('click', function() {
  const li = document.createElement('li');
  li.textContent = `пункт ${ul.children.length + 1}`;
  ul.appendChild(li);
});

или

ul.addEventListener('click', ({ target: t }) => t.matches('li') && t.append('!'));

button.addEventListener('click', () => {
  ul.insertAdjacentHTML('beforeend', `<li>пункт ${-~ul.children.length}</li>`);
});

не срабатывают case, всегда default

Всё-таки срабатывают.

Почему default случается когда вроде бы не должен - потому что у двух последних case'ов отсутствует break, соответственно, при их выполнении выполняется и default, идущий в самом конце.

Почему вы не видите эффекта от выполнения кода внутри case'ов - да потому что нечего видеть. Вы скопировали значение свойства display в переменную, и эта копия уже никакого отношения к оригиналу не имеет, что бы вы с ней не делали, это никак не отразится на элементе. Чтобы элемент изменился, надо новые значения назначать его свойствам. Но, конечно, не напрямую, а так, как это принято в react'е - заводите в компоненте стейт, на основе значений из стейта в методе render устанавливаете свойства элементам, когда хотите их изменить, обновляете стетйт.

Ещё пара моментов, которые стоит упомянуть:

Почему у вас li вложен в div? Разберитесь, какие элементы куда можно вкладывать, а куда нельзя.

Зачем два одинаковых обработчика клика? Второй, который у li, он не нужен - делает ровно то же, что и первый. Потому что... Почитайте, что такое всплытие событий.

.gray {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
}

map.panes.get('ground').getElement().classList.add('gray');

https://jsfiddle.net/8y0t6kjv/

async function processData(data, process, chunkSize, delay) {
  let i = -1;
  for (const n of data) {
    if (++i === chunkSize) {
      i = 0;
      await new Promise(r => setTimeout(r, delay));
    }
    process(n);
  }
}


processData(Array(10).keys(), console.log, 3, 1500).then(() => console.log('DONE'));

Object.entries + деструктуризация:

for (const [ index, el ] of Object.entries(elems)) {
  ...

Надо только иметь в виду, что тут index будет строкой. Чтобы получать числа, можно позаимствовать метод entries у Array или NodeList:

for (const [ index, el ] of Array.prototype.entries.call(elems)) {
  ...

Или, превращать получаемую HTMLCollection в массив:

const elems = [...document.getElementsByClassName('one')];
for (const [ index, el ] of elems.entries()) {
  ...

Или, для получения элементов вместо getElementsByClassName использовать querySelectorAll, возвращающий NodeList:

const elems = document.querySelectorAll('.one');
for (const [ index, el ] of elems.entries()) {
  ...

Object.values(names.reduce((acc, n) => {
  const g = /^\d/.test(n[0]) ? n[0] : /^[А-Я]/i.test(n[0]) ? 'А-Я' : null;
  g && (acc[g] = acc[g] || [ g ]).push(n);
  return acc;
}, {}))

А может не надо рендерить компонент, пока данные не пришли? Тогда и undefined передаваться не будет.

<app-analytics-chart v-if="analytics.countOrdersByMonth"

Фильтруемым элементам добавить обёртку <div class="items"></div>.

Значениями option'ов пусть будут селекторы элементов, которые должны оказаться видимыми:

<select>
  <option value="*">Все</option>
  <option value=".red">Красные</option>
  <option value=".blue">Синие</option>
  <option value=".green">Зеленые</option>
</select>

Фильтрация:

$('select').change(function() {
  const selector = this.value;
  const $items = $('.items >');
  $items.filter(selector).slideDown();
  $items.not(selector).slideUp();
});

Состояние хранится в родителе, через параметры передаётся в дочерние компоненты. Из дочерних компонентов эмитятся события, по которым в родителе осуществляется обновление состояния.

UPD. Например.

Что пофиксить, подскажите плиз.

Ничего, полностью переписать:

.points {
  position: relative;
  height: 400px;
  border: 1px solid silver;
  overflow: hidden;
}

.point {
  display: inline-block;
  position: absolute;
  width: 20px;
  height: 20px;
  background: red;
}

class App extends React.Component {
  state = {
    points: [],
  }

  addPoint = ({ nativeEvent: { offsetX, offsetY } }) => {
    this.setState(({ points }) => ({
      points: [ ...points, {
        x: offsetX - 10,
        y: offsetY - 10,
      } ],
    }));
  }

  render() {
    return (
      <div className="points" onClick={this.addPoint}>
        {this.state.points.map(n => (
          <div className="point" style={{
            left: `${n.x}px`,
            top: `${n.y}px`,
          }}
          ></div>
        ))}
      </div>
    );
  }
}

str := "Gigabyte GA-B250M-DS3H (1,485)MSI B250M PRO-VD (MS-7A74) (1,199)MSI H110M PRO-VH PLUS (MS-7A15) (946)Asus H110M-K (816)Asrock B250M-HDV (807)MSI B250M PRO-VDH (MS-7A70) (667)MSI H110M PRO-VD (MS-7996) (663)"
reg, _ := regexp.Compile("\\(.*?\\)")
str = reg.ReplaceAllString(str, "")

const compareArrays = (a, b) => a.length === b.length && a.every((n, i) => n === b[i]);

Потому что настройки балуна относятся к properties, а не к options - читайте документацию.

+str.replace(/[^\d.]/g, '')

или

parseFloat(str.match(/[\d.]/g).join(''))

Слэши в начале и конце не нужны, а обратные слэшы должны быть экранированы:

response.search(`\\b${message}\\b`)

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

arr.reduceRight((_, n, i, a) => indexes.includes(i) && a.splice(i, 1), null);
// или
[...indexes].sort((a, b) => b - a).forEach(i => arr.splice(i, 1));
// или
arr.splice(0, arr.length, ...arr.filter((n, i) => indexes.indexOf(i) === -1));

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

const newArr = arr.filter(((indexes, n, i) => !indexes.has(i)).bind(null, new Set(indexes)));