0xD34F

data: () => ({
  focused: false,
}),

<input @focus="focused = true" @blur="focused = false">
<span v-show="focused">FOCUSED</span>

https://jsfiddle.net/mc69wnwu/

Есть тип данных interval - используйте его. Как подсказывает документация, его точность - до одной микросекунды, а диапазон значений... в общем, вам хватит.

О каком data-атрибуте идёт речь:

const key = 'value';
const attr = `data-${key}`;
const selector = `[${attr}]`;

Получаем элемент:

const $el = $(selector);
// или
const el = document.querySelector(selector);

Достаём из элемента значение атрибута:

const str = $el.data(key);
// или
const str = $el.attr(attr);
// или
const str = el.dataset[key];
// или
const str = el.getAttribute(attr);
// или
const str = el.attributes[attr].value;

Превращаем полученную строку в массив:

const arr = str.split(',');
// или
const arr = str.match(/\d+/g) || [];
// или
const arr = str.split(/\D/);
// или
const arr = JSON.parse(`[${str}]`); // вместо строк тут будут числа
// или
const arr = eval('[' + str + ']'); // и тут тоже числа

Есть, position называется. Только это не аналог один в один - синтаксис отличается.

Если в mysql вы пишите locate('cde', 'abcdef'), то в postgres будет так: position('cde' in 'abcdef').

Про всплытие событий слышали?

Обработчик клика на .modal-close не нужен - его убираем; добавляем проверку, кем является целевой элемент:

$('.modal-window').click(function(e) {
  if (e.target.matches('.modal-window, .modal-close')) {
    $(this).hide();
  }
});

А более полный вариант кода можно увидеть? Где вы определяете setCenterFunc? - судя по тому, что вы показали, она явно не в methods лежит.

Куда, что и в каком количестве надо добавить:

const container = document.querySelector('.dots-wrapper');
const tag = 'div';
const className = 'dot';
const count = 10;

Можно пойти двумя путями:

• Первый - собирание разметки. Для одного элемента она будет выглядеть так:
  
  

  const elementHTML = `<${tag} class="${className}"></${tag}>`;

  
  Чтобы её размножить, есть варианты:
  
  

  const elementsHTML = Array(count).fill(elementHTML).join('');
  // или
  const elementsHTML = Array(count + 1).join(elementHTML);
  // или
  const elementsHTML = elementHTML.repeat(count);

  
  Добавляем:
  
  

  container.innerHTML = elementsHTML;
  // или
  container.insertAdjacentHTML('beforeend', elementsHTML);

  
  
• Второй - создание элементов напрямую. Тут тоже есть разные варианты:
  
  

  for (let i = 0; i < count; i++) {
    const element = document.createElement(tag);
    element.classList.value = className;
    container.insertAdjacentElement('beforeend', element);
  }

  
  или
  
  

  while (container.children.length < count) {
    const element = document.createElement(tag);
    element.classList.add(className);
    container.appendChild(element);
  }

  
  или
  
  

  const element = document.createElement(tag);
  element.className = className;
  container.append(...Array.from({ length: count }, () => element.cloneNode()));

  
  

И здесь idUser не работает, только после перезагрузки страницы.

Ну так наверное надо бы на страницу Feed переходить после того, как пользователь будет сохранён в localStorage. Т.е., this.$router.push({name: 'feed'}) следует выполнять в колбеке запроса получения данных пользователя.

Также, почему-то я не могу получить из localstorage 'user' - пишет '[object Object]'.

Неудивительно. Ведь это объект. При сохранении в localStorage делайте JSON.stringify, а когда достаёте - JSON.parse.

Свойство checked сделать массивом, который будет содержать состояния чекбоксов. Сами чекбоксы на основе этого массива и создавать, через v-for. Слушать событие change, по которому выставлять состояния предыдущих чекбоксов (относительно того, на котором событие случилось) в true, следующих в false:

data: () => ({
  checked: [ 0, 0, 0, 0, 0 ],
}),
methods: {
  onChange(e, index) {
    const checked = e.target.checked;

    this.checked = [
      ...Array(index + checked).fill(1),
      ...Array(this.checked.length - index - checked).fill(0),
    ];
  },
},

<li v-for="(n, i) in checked">
  <label>
    <input
      type="checkbox"
      :checked="n"
      @change="onChange($event, i)"
    >
    {{ i + 1 }}
  </label>
</li>

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

а если несколько таких списков будет

Очевидно, нужен отдельный массив checked для каждого списка (если только вы не хотите, чтобы все списке выглядели одинаково). Что касается функции onChange, то надо будет добавить ей дополнительный параметр - чтобы была возможность указывать, с каким именно списком в данный момент идёт работа.

https://jsfiddle.net/9ba682w4/

Ищем готовое или реализовываем самостоятельно:

function throttle(f, delay) {
  let lastCall = -Infinity;

  return function() {
    const now = +new Date;
    if (now - lastCall > delay) {
      lastCall = now;
      return f.apply(this, arguments);
    }
  };
}

Так?

UPD. Как победить тормоза при большом интервале значений. Можно работать с интервалом, который не будет вызывать тормозов - уменьшить границы в 100 раз, например. А в полях ввода показывать настоящие значения. Ну а то, что таким образом станет заведомо невозможной точная настройка значений посредством слайдера - так она в любом случае невозможна для больших интервалов. В общем, вот примерчик того, как это можно сделать.

UPD. В более поздних версиях рендеринг был переделан, больше никаких тормозов.

https://jsfiddle.net/2xdvq7dL/1/

Так, что ли?

Можно использовать bind:

setTimeout(function() {
  console.log(this.resorts.join(', '));
}.bind(this), delay);

Или в переменную сохранить текущий контекст до вызова setTimeout и использовать её вместо this:

var that = this;
setTimeout(function() {
  console.log(that.resorts.join(', '));
}, delay);

Миксины.

<button data-block="block-one">69</button>
<button data-block="block-two">187</button>
<button data-block="block-three">666</button>

<div class="block block-one">hello, world!!</div>
<div class="block block-two">fuck the world</div>
<div class="block block-three">fuck everything</div>

$('body').on('click', 'button', function() {
  const $block = $(`.${this.dataset.block}`).toggleClass('show');
  $('.block').not($block).removeClass('show');
});

// или

document.addEventListener('click', ({ target: { dataset: { block } } }) => {
  if (block) {
    document.querySelectorAll('.block').forEach(({ classList: cl }) => {
      cl[cl.contains(block) ? 'toggle' : 'remove']('show');
    });
  }
});

или

<button class="button">69</button>
<button class="button">187</button>
<button class="button">666</button>

<div class="block block-one">hello, world!!</div>
<div class="block block-two">fuck the world</div>
<div class="block block-three">fuck everything</div>

const $blocks = $('.block');
const $buttons = $('.button').click(function() {
  const $block = $blocks.eq($buttons.index(this)).toggleClass('show');
  $blocks.not($block).removeClass('show');
});

// или

const blocks = document.querySelectorAll('.block');
const buttons = document.querySelectorAll('.button');

buttons.forEach(n => n.addEventListener('click', onClick));

function onClick() {
  const index = Array.prototype.indexOf.call(buttons, this);
  blocks.forEach((n, i) => n.classList[i === index ? 'toggle' : 'remove']('show'));
}

Потому что this внутри метода toggle - это не экземпляр vue. Не надо всюду пихать стрелочные функции.

Замените toggle: () => { на toggle() {.

Загоняем #article-1 в самый конец .content, по умолчанию делаем его видимым, и невидимым если до него есть .article:target. Типа так.

html += '<li onclick="location.href=\'' + product.url + '\'">';

или

html += `<li onclick="location.href='${product.url}'">`;