0xD34F

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'));

this.setState(({ clientData }) => ({
  clientData: {
    ...clientData,
    active: !clientData.active,
  },
}));

$('a').attr('title', function() {
  return $(this).text();
});

или

document.querySelectorAll('a').forEach(n => n.title = n.innerText);

или

for (const n of document.getElementsByTagName('a')) {
  n.setAttribute('title', n.textContent);
}

или

for (let i = 0; i < document.links.length; i++) {
  const n = document.links[i];
  if (n.tagName === 'A') {
    const title = document.createAttribute('title');
    title.value = n.innerHTML;
    n.attributes.setNamedItem(title);
  }
}

$('select').change(function() {
  $('button').prop('disabled', $(this).val() === '0');
});

или

document.querySelector('select').addEventListener('change', function() {
  document.querySelector('button').disabled = this.value === '0';
});

data: () => ({
  opened: null,
  blocks: [
    { id: 1, content: 'Я первый' },
    { id: 2, content: 'А я второй' },
    { id: 3, content: 'Третьим буду' },
  ],
}),

<a v-for="b in blocks" @click="opened = b">открыть {{ b.id }} блок</a>

<div v-if="opened" :class="`block-${opened.id}`">
  <a @click="opened = null">Скрыть блок</a>
  <div class="content">{{ opened.content }}</div>
</div>

например

const createTreeNode = title => ({ id: null, title, isDirectory: false });

const createTree = data =>
  data.reduce((root, { id, name }) => {
    (id === 0 ? [] : name.slice(1, -1).split('/')).reduce((parent, title) => {
      const c = parent.children = parent.children || [];
      parent.isDirectory = true;
      return c.find(n => n.title === title) || (c[c.length] = createTreeNode(title));
    }, root).id = id;
    return root;
  }, createTreeNode(data.find(n => n.id === 0).name.slice(1, -1)));

@click="product.quantity = Math.max(0, product.quantity - 1)"

Вместо computed свойства сделайте фильтр:

filters: {
  price: val => val.toFixed(2).replace(/(\d)(?=(\d{3})+\.)/g, "$1 ").replace('.', ','),
},

Соответственно, в шаблоне будет:

td {{ product.price | price }}

UPD. Кстати, раз уж вы выводите цены - можно вместо плясок с регулярными выражениями форматировать значение средствами функции toLocaleString, она умеет работать с деньгами, будет как-то так:

price: val => val.toLocaleString('ru', {
  style: 'currency',
  currency: 'RUB',
}),