0xD34F

Ну, очевидно, v-for имеет более высокий приоритет, вот и выполняется в обоих случаях.

Что делать? Добавьте элементу с v-for обёртку, в которую и перенесите v-if.

SELECT *
FROM table_name
WHERE (column_name->>'product_id')::integer IN (1,2,3,4,5,6,7,8,9,10)

можно:

input {
  color: transparent;
  text-shadow: 0 0 0 black;
}

Единственная странность, chrome после прилета данных выводит в консоль false черным цветом, а после изменения с помощью событий(по щелчку) - синим.
В чем может быть проблема?

Это хорошо, что вы обратили внимание на цвет - в первом случае у вас "false" (строка, поэтому оно и "всегда правда"), во втором false (boolean).

"Рендерить его по другому" - подход неверный.

Надо разделять предустановленные значения, и те, что вводит пользователь. Так что просто числа хранить уже не получится - наверное, стоит сделать объект, который содержит в себе значение ячейки и её disabled. Как-то так.

rootVueSteplist.$data = Object.assign(rootVueSteplist.$data, response.data)

Присваивание не нужно. Object.assign модифицирует объект, переданный первым аргументом. Т.е., достаточно просто

Object.assign(rootVueSteplist.$data, response.data);

Или даже Object.assign(rootVueSteplist, response.data);, ведь как нам докладывает документация про $data,

Экземпляр проксирует сюда вызовы своих полей. (Например, vm.a будет указывать на vm.$data.a)

Пытался нагуглить, но самостоятельно разобраться в простыне кода не могу.

Что-то вы странное нагуглили - на всё про всё строчек десять, никакой "простыни".

Вычисляете координаты начала текущего блока, затем обходите его (два цикла, один вложен в другой, от начальных координат до начальных + 3). Типа так.

Делал так:

{{#each array}}
        {{#each this}}
            {{@index}} {{this}}
        {{/each}}
{{/each}}

А что такое array? Такого свойства у вас в json'е нет. Пишите this.

Как получить ключи из products внутри компонента? По идее, их вроде бы надо объявить в props

А чо не объявили-то?

вылетает ошибка

Очень информативно. Для ясновидящих.

products: [];

Уверены, что тут должна быть точка с запятой? Возможно, вместо того, чтобы обламывать зубы на использовании фреймворков, вам следует изучить основы языка?

Так, теперь что делать:

1. Указываете ключ из products в props, его же используете в шаблоне:

Vue.component('cart-item', {
  props: [ 'product', 'productKey' ],
  template:'<div>{{ product }} {{ productKey }}</div>',
});

2. Также несколько иначе будет выглядеть ваш v-for:

<cart-item
  v-for="(product, key) in products"
  :product="product"
  :product-key="key"
  :key="key"
></cart-item>

UPD. Возможно, стоит сделать products массивом по получении данных, и ключи - свойствами элементов массива. Тогда не придётся передавать в компонент дополнительный параметр.

Как опознать блоки со спойлерами, а также заголовки и контент у них внутри; какой класс надо переключать; как контент должен изменять свою видимость. Ну и сама логика переключения видимости контента - при закрытии спойлеров не надо обрабатывать текущий, т.е., инвертировали состояние кликнутого, взяли все, отбросили кликнутый, закрыли:

const containerSelector = '.spoiler-container';
const headerSelector = '.spoiler-header';
const contentSelector = '.spoiler-content';
const activeClass = 'active';
const toggleEffect = 'slideToggle'; // или fadeToggle, или toggle
const hideEffect = 'slideUp'; // или fadeOut, или hide

function toggle($containers, $container) {
  $containers
    .not($container)
    .removeClass(activeClass)
    .find(contentSelector)
    [hideEffect]();

  $container
    .toggleClass(activeClass)
    .find(contentSelector)
    [toggleEffect]();
}

Обработчик клика подключается блокам со спойлерами, но клики слушаться будут только по заголовкам:

const $containers = $(containerSelector).on('click', headerSelector, e => {
  toggle($containers, $(e.delegateTarget));
});

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

$(document).on('click', `${containerSelector} ${headerSelector}`, e => {
  toggle($(containerSelector), $(e.target).closest(containerSelector));
});

Используйте Proxy:

const arr = new Proxy([], {
  get(target, prop) {
    const value = target[prop];
    return value instanceof Function
      ? (...args) => {
          console.log(`метод "${prop}" вызван со следующими аргументами:`, args);
          return value.apply(target, args);
        }
      : value;
  },
  set(target, prop, value) {
    console.log(`свойству "${prop}" наначено следующее значение:`, value);
    target[prop] = value;
    return true;
  },
});

Можно определить собственное свойство value у интересующего вас элемента или переписать сеттер HTMLTextAreaElement.prototype.value - так, чтобы при установке значения генерировалось нужное вам событие.

https://codepen.io/anon/pen/GQywpG?editors=1010

Как указать плагину какой конкретно стейт нужно синхронизировать?

У vuex-persistedstate при создании экземпляра можно в настройках определить свойство paths, перечисляющее, какие части стейта надо сохранять.

Или можно определить метод reducer, который получает текущий стейт и возвращает стейт, который нужно сохранить.

И можно ли из какого-нибудь экшена сказать ему, что вот сейчас нужно перезаписать/удалить что-то из localstorage?

Ничего такого не нужно, обновление localStorage происходит автоматически при обновлении стейта.

Или вы хотите, чтобы сохранение стейта осуществлялось только в определённые моменты? Тогда вам поможет метод filter - получает объект, содержащий имя выполняемой мутации (да-да, мутации, а не экшена) и её payload, возвращает true/false - надо/не надо выполнять сохранение.

const store = new Store({
  // ...
  plugins: [
    createPersistedState({
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) => Cookies.set(key, value, { expires: 3, secure: true }),
        removeItem: key => Cookies.remove(key)
      }
    })
  ]
})

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

const str = 'qwe//qwe';
const reg = /(qwe\/).*(\/qwe)/;
const replacement = 'hello, world!!';
const newStr = str.replace(reg, `$1${replacement}$2`);

Можно указывать несколько свойств, каждое со своим временем анимации, через запятую. Типа так:

transition: color 1s, background-color 5s;

<button>add</button>

document.querySelector('button').addEventListener('click', function() {
  document.body.appendChild(document.createElement('div'));
});

div {
  height: 50px;
  margin: 5px;
  background: red;
  animation: show-div 3s;
}
@keyframes show-div {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Сделайте отдельный метод:

@click="onClick"

methods: {
  onClick() {
    this.myVueMeth1();
    this.myVueMeth2();
    document.forms[0].submit();
  },
},

UPD. Конечно, вы можете определить computed свойство для document, типа так:

computed: {
  document() {
    return document;
  },
},

Тогда ваш первый пример заработает. Но это какое-то варварство, на мой взгляд.

if (cell.textContent === num) {

Дайте-ка угадаю - num, это число, да? Сенсация! Шок! - число не может быть равно строке.

Сравнивайте с приведением типов:

if (cell.textContent == num) {

Или явным образом приводите значения к одному типу:

// строку в число
if (+cell.textContent === num) {

// число в строку
if (cell.textContent === `${num}`) {