0xD34F

Попробовала показать работу тут.

Выглядит очень печально. Ну, не работает ни хрена. Так что на этом этапе помочь вам будет весьма затруднительно - неясно, где себя проявляют проблемы, о которых вы говорите (говорите в целом ни о чём, поподробнее бы), а где косяки, допущенные вами при переносе кода в песочницу.

Из странных вещей, которые можно отметить сразу:

1. Использование даты в качестве key - что, не может быть двух событий в одну дату? Ну и пересоздание экземпляра компонента при каждом изменении даты - тоже как-то стрёмно выглядит.

2. Обновление данных (onDateInfo) - пишите присланные из компонента данные в какой-то непонятный объект, всегда один и тот же (а экземпляры компонента Date всё-таки разные). Это я вообще не понял, бред какой-то.

Немного поправил ваш код - по крайней мере, добавление/удаление заработало, и данные обновляются какие надо (если я правильно всё понял). Теперь можете начинать рассказывать, как воспроизвести ваши проблемы - что делать, куда смотреть.

Что делаю не так?

Пытаетесь подставлять значения посредством шаблонных строк вместо того, чтобы воспользоваться средствами форматирования, которые предоставляет pg-promise (точнее - смешиваете эти подходы).

Как правильно подставить параметры в запрос

Да как-то так, например:

db.query(`
  SELECT *
  FROM table
  WHERE id NOT IN ($(list:csv))
  LIMIT $(limit)
`, obj)

Про npm publish слышали?

Ну и примеры использования конкретно с vue - раз, два, три, ... тысячи их. В общем, погуглил за вас.

Причем, если поле уже чем-то уже заполнено по умолчанию, то этот текст уже должен быть транслирован в параграф. Так-что ввод с клавиатуры отслеживать не подходит.

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

$('input').on('input', function() {
  $('p').text($(this).val());
}).trigger('input');

// или

const input = document.querySelector('input');
const p = document.querySelector('p');
input.addEventListener('input', e => p.textContent = e.target.value);
input.dispatchEvent(new Event('input'));

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

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

Проще говоря, когда инпут пустой, надо отображать текст параграфа.

Текст по умолчанию засунуть в data-атрибут: <p data-default-text="Текст по умолчанию"></p>.

Если инпут пустой, хватаем значение этого атрибута:

$('p').text($(this).val() || $('p').data('default-text'));

// или

p.textContent = e.target.value || p.dataset.defaultText

Помогите пожалуйста написать учебный пример чтобы было видно действие и выгода инкапсуляции стилей. Мой вариант тут.

"Помогите"? Да вы и сами справились. Только зачем-то сами же всё и поломали.

непонятно какое действие осуществляет метааргумент encapsulation: ViewEncapsulation.None

Это отключение инкапсуляции стилей компонента.

Есть корневой элемент и есть вложенный элемент. В каждом из них я отключил инкапсуляцию, но в результате к обоим применяются стили из первого. Где логика?

Кажется, вы забыли о том, что у вас в стилях дочернего компонента background закомментирован - потому и применяется стиль из родительского компонента. Уберите комментирование - и оба элемента будут стилизованы в соответствие с правилом из дочернего компонента.

А ещё лучше - прекратите вдобавок отключать инкапсуляцию, и тогда элементы из разных компонентов будут стилизованы каждый по-своему, несмотря на то, что имя класса - одно и то же. Собственно, в этом и состоит, как вы там выразились? - "выгода инкапсуляции" - вы можете в каждом из компонентов определять собственные правила стилей, не беспокоясь о том, что они будут пересекаться со стилями других компонентов.

У вас в grid-template-areas область nav буквой "г" загнута. Опечатка? - наверное, имелось в виду что-то вроде этого.

А почему бы не использовать в шаблоне значение из props, вместо того, чтобы мучиться с отслеживанием изменений и т.д.?

Ну а так-то можно конечно использовать watch, чтобы следить за изменением props'ов, и переприсваивать что там вам нужно.

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

computed: {
  categories() {
    return this.$store.state.main_page.NEWS.map(n => ({
      value: n.id,
      label: n.name,
    }));
  },
},

Передавайте в метод удаления индекс удаляемого элемента, например:

deleteRow={() => this.deleteRow(i)}

deleteRow(index) {
  const productsList = [...this.state.productsList];
  productsList.splice(index, 1);
  this.setState({
    productsList,
  });
}

const grouped = data
  .reduce((acc, n, i, a) => {
    if (i && n.id === a[i - 1].id + 1) {
      acc[acc.length - 1][1][1] = n.id;
    } else {
      acc.push([ [], [ n.id ] ]);
    }
    acc[acc.length - 1][0].push(n);
    return acc;
  }, [])
  .reduce((acc, n) => {
    acc[n[1].join('-')] = n[0];
    return acc;
  }, {});

Сохранять открытые пункты меню в стек. Верхний элемент стека - текущий список пунктов меню (оформляем в виде вычисляемого свойства). Надо перейти к вложенному - кладём его в стек. Надо закрыть текущий и вернуться к родительскому - удаляем элемент из стека.

https://jsfiddle.net/dLyo3mkw/

У computed свойств можно делать (а вам в данной ситуации и нужно) и сеттеры:

dateStart: {
  get() {
    return moment().subtract(1, this.selectedPeriod).toDate();
  },
  set(value) {
    // ну, тут вам виднее, какой должен код быть
  },
},

Во-первых, параметр state функции, переданной в setState, перекрывает параметр state, передаваемый в modalRun. Во-вторых, второй параметр функции, передаваемой в setState - это props, а вовсе не state. В общем, дурацким выбором имён параметров сами себя в заблуждение вводите. Делайте так:

modalRun = (modalState) => {
  this.setState((prevState) => {
    return {
      modal: {
        ...prevState.modal,
        state: modalState,
      },
    };
  });  
}

$('input').on('input', function() {
  const
    $this = $(this),
    newVal = +$this.val(),
    oldVal = +$this.data('oldVal') || 0;

  if (oldVal !== newVal) {
    console.log(`новое ${['больше', 'меньше'][+(oldVal > newVal)]}`);
  }

  $this.data('oldVal', newVal);
});

Как я понимаю, при клике я каждый раз вызываю функцию и переменная val опять принимает значение равное нулю?

Не совсем так. При каждом клике создаётся ещё один экземпляр val, подключаются ещё по одному обработчику клика к .value-btn-plus и .value-btn-minus, сами обработчики срабатывают в порядке подключения, поэтому в value-text последним будет записано значение val, к которому имеет доступ последний же подключенный обработчик - т.е. 0, или что там у вас.

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

$(document).on('click', '.value-btn-plus, .value-btn-minus', function() {
  const $this = $(this);
  const change = $this.hasClass('value-btn-plus') ? 1 : -1;

  $this
    .closest('.input-box')
    .find('.value-text')
    .text((i, text) => Math.max(0, +text + change));
});

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

document.addEventListener('click', ({ target: t }) => {
  const change = +t.matches('.value-btn-plus') || -t.matches('.value-btn-minus');
  if (change) {
    const valueEl = t.closest('.input-box').querySelector('.value-text');
    valueEl.innerText = Math.max(0, +valueEl.innerText + change);
  }
});

Во первых - не нужны слэши в начале и конце, во-вторых - надо экранировать обратный слэш:

new RegExp('^\\d+$')

Ну или не надо использовать конструктор:

const numberValidator = str => /^\d+$/.test(str);

// можно и наоборот - вместо проверки, что все символы являются цифрами,
// убедиться, что отсутствует хотя бы один не являющийся цифрой
const numberValidator = str => !/\D/.test(str);

Про let слышал, но нужно сделать без него

Не нужно, но варианты есть такие:

for (var i = 0; i < 10; i++) {
  (function(i) {
    setTimeout(function() { 
      console.log(i);
    }, 1000);
  })(i);
}

for (var i = 0; i < 10; i++) {
  setTimeout(function() { 
    console.log(+this);
  }.bind(i), 1000);
}

for (var i = 0; i < 10; i++) {
  setTimeout(console.log, 1000, i);
}

for (var i = 0; i < 10; i++) {
  setTimeout(new Function(`console.log(${i})`), 1000);
}

for (var i = 0; i < 10; i++) {
  setTimeout(function() {
    console.log(10 - i--);
  }, 1000);
}

^(([1-9]\d?)|(100)),(([1-9]\d?)|(100))$

<div class="container">
  <div class="yellow"></div>
  <textarea></textarea>
</div>

.container {
  display: inline-flex;
  width: 200px;
  height: 400px;
  flex-direction: column;
  border: 10px solid red;
}

.yellow {
  background: yellow;
  flex-grow: 1;
}

textarea {
  background: #47f;
  line-height: 20px;
  resize: none;
}

const textarea = document.querySelector('textarea');

textarea.addEventListener('input', function() {
  const maxHeight = 300;
  const height = 20 * this.value.split('\n').length;
  this.style.height = `${Math.min(height, maxHeight)}px`;
});

textarea.dispatchEvent(new Event('input'));

из-за того, что при первичном рендере input №2 не существует, на него не применяется библиотека VeeValidate

Не совсем так, "input №2" - он вообще не существует, никогда. При смене значения show используется уже созданный элемент - потому что virtual dom, ага. Из-за этого veevalidate и косячит.

Задайте инпутам key - тогда они будут пересоздаваться при изменении show, и veevalidate заработает как надо.