0xD34F

function sum(...values) {
  const s = values.reduce((acc, n) => acc + n, 0);
  const f = sum.bind(null, s);
  f.valueOf = () => s;
  return f;
}

Создаёте вручную экземпляр, вручную же добавляете его $el в DOM-дерево, и так же вручную удаляете.
Alert, например. А вот confirm.

const content = document.querySelector('#cont');
const sidebar = document.querySelector('#side');
let state = false;

document.querySelector('button').addEventListener('click', () => {
  state = !state;
  content.classList.toggle('col-md-9',  !state);
  content.classList.toggle('col-md-12',  state);
  sidebar.classList.toggle('d-none',     state);
});

Object.entries(Obj).reduce((acc, [ k, v ]) => ((acc[v] = acc[v] || []).push(k), acc), {})

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

- .popup.visible {
+ .item.visible .popup {

const container = document.querySelector('.container');
const itemSelector = '.item';
const activeClass = 'visible';
const toggleItem = (item, items) =>
  items.forEach(n => n.classList[n === item ? 'toggle' : 'remove'](activeClass));


// делегирование, назначаем обработчик клика один раз для всех item'ов
container.addEventListener('click', function({ target: t }) {
  if (t.matches(itemSelector)) {
    toggleItem(t, this.querySelectorAll(itemSelector));
  }
});

// или, каждому item'у назначаем обработчик клика индивидуально
const items = container.querySelectorAll(itemSelector);
items.forEach(n => n.addEventListener('click', onClick));

function onClick({ target: t }) {
  if (this === t) {
    toggleItem(t, items);
  }
}

str.replace(/\s+/g, ' ').trim()

jsfiddle.net/dLz1rftv

const itemSelector = '.accordion_item';
const buttonSelector = `${itemSelector} .title_block`;
const contentSelector = '.info';
const activeClass = 'active_block';
const toggleEffect = 'slideToggle'; // или fadeToggle, или toggle
const onClick = e => $(e.currentTarget)
  .closest(itemSelector)
  .toggleClass(activeClass)
  .find(contentSelector)
  [toggleEffect]();

// обработчик клика подключаем к заголовкам
$(buttonSelector).click(onClick);

// или, если предполагается добавление новых секций аккордеона уже после
// подключения обработчика, то лучше будет повесить его на документ,
// дополнительно указав, у каких элементов надо слушать событие;
// в этом случае клики по динамически добавляемым элементам будут
// обрабатываться так же, как и по тем, что существовали изначально
$(document).on('click', buttonSelector, onClick);

Как-то у вас всё переусложнено.

Зачем вешать обработчик клика на body? - можно же добавить инпуту autoFocus={true} и отключать редактирование по событию blur. Так проблема с ненужным срабатыванием обработчика клика решится сама собой.

Как вы собираетесь отменять результаты редактирования, если постоянно перетираете стейт? - предыдущее значение теряется. Лучше вырезать обработчик onChange, а вместо value задавать defaultValue.

Похоже на то, к чему вы стремились?

Вы дважды определяете window.onload - естественно, второе определение затирает первое, поэтому первый график не создаётся. Объедините обе функции в одну. Или назначайте обработчики с помощью addEventListener:

window.addEventListener('load', function() {
  var ctx = document.getElementById('canvas').getContext('2d');
  window.myLine = new Chart(ctx, config);
});

function connectInputs(selector) {
  const onInput = e => $inputs.val(e.target.value);
  const $inputs = $(selector).on('input', onInput);
  return () => $inputs.off('input', onInput);
}

connectInputs('#input, #output');

или, к чёрту jquery:

function connectInputs([...inputs]) {
  const onInput = e => inputs.forEach(n => n.value = e.target.value);
  inputs.forEach(n => n.addEventListener('input', onInput));
  return () => inputs.forEach(n => n.removeEventListener('input', onInput));
}

connectInputs(document.querySelectorAll('#input, #output'));

data: () => ({
  options: [
    { value:  69, text:  'hello, world!!' },
    { value: 187, text:  'fuck the world' },
    { value: 666, text: 'fuck everything' },
  ],
  value: null,
}),
computed: {
  selectedText() {
    return (this.options.find(n => n.value === this.value) || {}).text || '';
  },
},

<select v-model="value">
  <option v-for="n in options" :value="n.value">{{ n.text }}</option>
</select>
<div>
  Текст выбранной опции: <span>{{ selectedText }}</span> 
</div>

const selector = '.program-link img';
const variation = 10;
const key = 'transform';
const getVal = () => `rotate(${variation * (Math.random() * 2 - 1)}deg)`;

$(selector).css(key, getVal);

// или

document.querySelectorAll(selector).forEach(n => {
  n.style[key] = getVal();
  // или
  n.style.setProperty(key, getVal());
  // или
  n.style.cssText += key.concat(': ', getVal());
  // или
  n.setAttribute('style', key + ': ' + getVal());
});

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

Что, наверное, совсем неудивительно - не вижу, чтобы вы обновляли предыдущее значение после вычисления разницы. Оно у вас изначально нулевое, надо полагать - ну вот постоянно и вычисляете разницу с нулём.

А вообще, хранить предыдущее значение необходимости нет:

watch: {
  totalBuyQuantity(newVal, oldVal) {
    this.buyDiff = newVal - oldVal;
  },
},

пробовал использовать computed <...> если пользователь руками поменяет этот адрес, он все равно останется прежним

Добавьте сеттер:

email() {
  get() {
    return this.$store.state.user.email;
  },
  set(val) {
    // тут вызов мутации, которая поменяет значение в хранилище
  },
},

scrollIntoView

демо

Параметр, через который вы пытаетесь настраивать превью

1. Является отдельной штукой, а не частью slideConfig
2. Пишется с маленькой буквы

Т.е.: [previewConfig]="{ number: 10 }".

После изменения значения labels надо график обновить: myChart.update().

Сначала вычисляем максимальный размер вложенных массивов:

const length = Math.max(...players.map(n => n.holes.length));

// или

const length = players.reduce((max, { holes: { length: n } }) => max > n ? max : n, 0);

Дальше можно дополнить существующие массивы:

for (const { holes } of players) {
  holes.push(...Array.from(
    { length: length - holes.length },
    () => ({ score: '-' })
  ));
}

Или собрать новые:

const newPlayers = players.map(n => ({
  ...n,
  holes: Array.from({ length }, (_, i) => n.holes[i] || { score: '-' }),
}));

$('.select-list').change(function() {
  const selected = $(':checked', this)
    .parent()
    .get()
    .map(n => $(n).text().trim())
    .join(', ');

  $('.selected-name--filter').text(selected || 'Любой');
}).change();

или

const select = document.querySelector('.select-list');

select.addEventListener('change', function() {
  const selected = Array
    .from(this.querySelectorAll(':checked'), n => n.parentNode.textContent.trim())
    .join(', ');

  document.querySelector('.selected-name--filter').textContent = selected || 'Любой';
});

select.dispatchEvent(new Event('change'));