0xD34F

const FILTER_VALUE = 'eg';

const filteredArr = arr.reduce((acc, el) => {
  const items = el.items
    .filter(n => n.keywords.some(m => m.includes(FILTER_VALUE)))
    .map(n => ({ ...n, keywords: [...n.keywords] }));

  if (items.length) {
    acc.push({ ...el, items });
  }

  return acc;
}, []);

Клонируете исходный элемент:

const $initial = $('.some-div').clone();

Когда надо восстановить, заменяете текущий на сделанный ранее клон:

$('.some-div').replaceWith($initial);

Если предполагается неоднократное восстановление, то заменять надо на клон клона исходного элемента:

$('.some-div').replaceWith($initial.clone());

Сделаем функцию, которая будет осуществлять рекурсивный поиск:

const find = (arr, id) =>
  (Array.isArray(arr) ? arr : []).reduce((found, n) =>
    found || (n.id === id ? n : find(n.children, id))
  , null);

И, используя её, перепишем вычисляемое свойство:

selected() {
  return this.active.length
    ? find(this.users, this.active[0])
    : null;
},

UPD. Почитал документацию - оказывается, можно всё сделать гораздо проще. Указываем для treeview параметр return-object - тогда в active вместо ключей будут объекты. Соответственно, искать ничего не надо, вычисляемое свойство сократится до

selected() {
  return this.active[0];
},

Чтобы несколько раз одно и то же дальше не писать, небольшой декоратор:

const queryIfSelector = f => x =>
  f(typeof x === 'string' ? document.querySelector(x) : x);

Как можно доставать данные из таблицы:

const getTableData = queryIfSelector(table =>
  Array.from(table.querySelectorAll('tbody tr'), tr =>
    Object.fromEntries(Array.from(tr.querySelectorAll('td'), td => [
      td.getAttribute('data-name'),
      td.querySelector('input').value,
    ]))
  )
);

// или

const getTableData = queryIfSelector(table =>
  Array.prototype.flatMap.call(table.tBodies, tbody =>
    Array.prototype.map.call(tbody.rows, tr =>
      Array.prototype.reduce.call(tr.cells, (acc, td) => (
        acc[td.dataset.name] = td.firstElementChild.value,
        acc
      ), {})
    )
  )
);

// или

const getTableData = queryIfSelector(table => {
  const result = [];
  const numHeadRows = table.querySelectorAll('thead tr').length;

  for (const input of table.querySelectorAll('tbody input')) {
    const td = input.closest('td');
    const i = td.parentNode.rowIndex - numHeadRows;
    const item = result[i] = result[i] || {};
    item[td.attributes['data-name'].value] = input.value;
  }

  return result;
});

Достаём:

const data1 = getTableData('#table1');
const data2 = getTableData(document.querySelector('#table2'));

Выполняете setState до получения ответа (метод onSearchChange).

Как называются - да без понятия, обычные компоненты:

const Component = Vue.extend(...);

Экземпляры создаёте не через шаблон/render-функцию других компонентов, а вручную вызываете конструктор и добавляете корневой элемент куда там вам надо:

document.body.appendChild(new Component(...).$mount().$el);

Удаление - так же вручную, вызываете метод $destroy и удаляете корневой элемент из DOM.

всё правильно, %d - это количество дней в пределах месяца

хотите увидеть полное количество дней - используйте %a

for (name, items) in cook_book:
  print('\n%s:' % name.capitalize())
  for (ingredient, quantity, unit) in items:
    print('%s, %d %s' % (ingredient, quantity * person, unit))

document.querySelector('textarea').addEventListener('keydown', e => e.preventDefault());

или

<textarea readonly></textarea>

$('table tr').get().reduce((acc, n) => acc.then(() => $.ajax(...)), $.Deferred().resolve());

UPD. https://jsfiddle.net/zgf93och/1/

Добавляете свойство, которое будет представлять выбранный пункт select'а. Вместо метода getMonthRate делаете вычисляемое свойство:

<select v-model="selected">
  <option v-for="item in options" :value="item.value">
    {{ item.title }}
  </option>
</select>

data: () => ({
  selected: null,
  ...
}),
computed: {
  monthRate() {
    if (this.selected === 'year') {
      return this.percent / 12 / 100;
    } else if (this.selected === 'month') {
      return this.percent / 100;
    } else {
      return 0;
    }
  },
},

UPD.

нужно, чтобы в зависимости от выбранной опции, функция срабатывала по разной формуле

А насколько разной? То, что есть сейчас, можно значительно упростить: в качестве value вместо строк будут числа, напрямую подставляемые в формулу - 1/12 для year, 1 для month, 0 для остальных. Тогда вычисляемое свойство станет гораздо короче:

monthRate() {
  return this.percent * this.selected / 100;
},

Кого будем вставлять: const text = '|||';.

Вот jquery:

$el.children().slice(1).before(text);

// или

$el.children(':nth-child(n + 2)').before(text);

// или

$el.find('> :nth-last-child(n + 2)').after(text);

А вот jquery катится к чёрту:

Array.prototype.forEach.call(
  el.children,
  (n, i) => i && n.before(new Text(text))
);

// или

for (const n of el.children) {
  if (n.nextElementSibling) {
    n.insertAdjacentText('afterend', text);
  }
}

// или

for (let i = 1; i < el.children.length; i++) {
  el.insertBefore(document.createTextNode(text), el.children[i]);
}

// или

el.querySelectorAll(':scope > * + *').forEach(n => n.outerHTML = text + n.outerHTML);

const gallerySelector = '.js-product__item';
const previewSelector = '.view__item img';
const mainImageSelector = '.js-product__img--current';
const showImage = preview => preview
  .closest(gallerySelector)
  .querySelector(mainImageSelector)
  .src = preview.src;

document.addEventListener('click', ({ target: t }) => {
  if (t.matches(previewSelector)) {
    showImage(t);
  }
});

// или

document.querySelectorAll(previewSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => showImage(e.target));

array_change_key_case

https://ru.reactjs.org/docs/faq-ajax.html#where-in...

const keys = [
  [
    { on: [ 'ё', 'Ё' ], off: [ '`', '~' ], name: 'Backquote' },
    { on: [ '1', '!' ], off: [ '1', '!' ], name: 'Digit1' },
    ...
  ],
  ...
];


document.querySelector('.keyboard').innerHTML = keys.map(row => `
  <div class="row">${row.map(n => `
    <div class="key">
      <span class="${n.name} on">
        <span class="case down">${n.on[0]}</span>
        <span class="case up">${n.on[1]}</span>
      </span>
      <span class="${n.name} off">
        <span class="case down">${n.off[0]}</span>
        <span class="case up">${n.off[1]}</span>
      </span>
    </div>`).join('')}
  </div>`).join('');

Какой атрибут? Key? Нет такого атрибута у элемента, key для другого нужен.

Хотите знать id в обработчике клика - сделайте какой-нибудь другой атрибут, не key. Например:

data-id={user.id}

const elemId = +e.currentTarget.dataset.id;