0xD34F

.class2:hover + .class3 {
  color: red;
}

У вас пробел лишний между .list и :hover. Должно быть так: .list:hover

Аналогично собственным данным компонента, они доступны как свойства экземпляра:

props: [ 'post' ],
created() {
  console.log(this.post);
},

Откуда и что надо удалить:

const { classList: cl } = div;
const toRemove = '_key-word';

Удаляем:

cl.remove(...[...cl].filter(n => n.indexOf(toRemove) !== -1));

// или

for (let i = cl.length; i--;) {
  if (cl[i].includes(toRemove)) {
    cl.remove(cl[i]);
  }
}

// или

cl.value = cl.value
  .replace(RegExp(`\\S*${toRemove}\\S*`, 'g'), '')
  .replace(/^ +| +(?= |$)/g, '');

Поиск по свойствам вложенных объектов "из коробки" не предусмотрен. Так что без костылей не обойтись.

Вижу три варианта:

• Перенос свойств вложенных объектов непосредственно в объект строки таблицы. То есть, сейчас у вас есть { user: { city: { name: "..." } } } , а будет { userCityName: "..." } или { user_city_name: "..." }, как-то так.
  
• Создание кастомных фильтров по столбцам, созданным с помощью templates. Всё вручную - создание фильтра, написание логики его работы и т.д. Также из минусов данного подхода - элементы управления кастомных фильтров находятся за пределами таблицы, в отличие от встроенных. Нагуглил пример реализации, на его основе сделал пример поиска по свойствам вложенных объектов.
  
• Наконец, можно обернуть данные в Proxy. Определять templates в этом случае не нужно, всё работает так, будто интересующие нас свойства принадлежат не вложенным объектам, а непосредственно объекту строки таблицы. Соответственно, и встроенный поиск тоже доступен. Идея в чем: делаем get-ловушку, в ней режем имя свойства, например "user.city.name", на куски, идём вглубь по полученной цепочке имён, достаём значение. Опять же, сделал небольшой пример.
  

UPD. Добавили возможность определять методы фильтрации для отдельных столбцов, так что вот четвёртый вариант.

ALTER TABLE main_owner ADD COLUMN fsex varchar(1) NOT NULL  check (fsex = 'M' or fsex = 'W');

Или так:

ALTER TABLE main_owner ADD COLUMN fsex varchar(1) NOT NULL  check (fsex IN('M', 'W'));

Если совпадения должны быть по обоим: return itemData && monthData.
Если достаточно одного: return itemData || monthData.

UPD. А вообще, давайте попробуем реализовать более общее решение, с произвольным количеством фильтров.

Добавим описания фильтров. Пусть это будет объект, имена свойств которого совпадают со свойствами, по которым выполняется фильтрация, а значения - объекты, содержащие текущее значение фильтра и функцию сравнения:

data: {
  filters: {
    'какое-то свойство': {
      value: какое-то дефолтное значение,
      compare: (itemValue, filterValue) =>
        сравнение значений фильтра и элемента фильтруемого массива
    },
    ...
  },
  ...

Создадим элементы управления, чтобы пользователь мог редактировать значения фильтров, например:

<input v-model="filters.xxx.value">

или

<select v-model="filters.yyy.value">

Сделаем вычисляемое свойство, представляющее отфильтрованные данные. Перебираем фильтры, на каждой итерации отбрасываем те элементы, которые не проходят текущий фильтр:

computed: {
  filteredItems() {
    return Object.entries(this.filters).reduce((items, [ key, filter ]) => {
      return items.filter(item => filter.compare(item[key], filter.value));
    }, this.items);
  },
  ...

https://jsfiddle.net/89sLpwar/

Вместо значений, чьим логическим эквивалентом является false, подсовывайте какое-то корректное дефолтное значение, в данном случае - пустую строку:

(item._Name || '').trim()

UPD. Наконец-то дождались, и трёх лет не прошло:

item._Name?.trim?.() ?? ''

<td v-for="(n, i) in row">
  <input @keydown.tab="i === row.length - 1 ? onTab(n) : null">
</td>

https://jsfiddle.net/qrnh9s47/

Только в значении.

Есть варианты:

1. Добавлять к значению нижнюю границу интервала:
   
   <div v-for="n in 11">{{ n + 29 }}</div>
   
   
2. Отбрасывать ненужные элементы с помощью v-if (не рекомендуется):
   
   <div v-for="n in 40" v-if="n >= 30">{{ n }}</div>
   
   
3. Перебирать заранее подготовленные данные (свойство или параметр компонента):
   
   <div v-for="n in values">{{ n }}</div>
   
   

   values: [ 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40 ],

   
   
4. Генерировать нужную последовательность с помощью метода (не круто, при каждом рендеринге вычисляется заново):
   
   <div v-for="n in getValues(30, 40)">{{ n }}</div>
   
   

   getValues(lower, upper) {
     return [...Array(upper - lower + 1)].map((n, i) => lower + i);
   },

   
   

https://jsfiddle.net/ye02a6ct/

Вы выставляете max-height равным 600, в то время как высота элемента - всего 50. Так что пока max-height уменьшается с 600 до 50, внешне ничего не меняется.

UPD. Как исправить. Могу предложить два варианта:

1) Менять max-height не у ul, а у li. Это позволит назначить конкретную высоту элементов. Типа так.

2) Для открытого состояния также определить transition: max-height. Подобрать временные функции так, чтобы при открытии списка сначала он разворачивался медленно, а в конце быстро. А при закрытии наоборот - сначала быстро, затем медленно. Типа так.

Непонятно, откуда мог бы взяться $id. Вы определяете его только в случае isset($_GET['id']), но никакого id у вас в запросе не передаётся.

Добавляете selected каждому элементу items, используете его в v-model, также отслеживаете переключение списка в родителе и сбрасываете selected всех элементов, кроме переключенного. Как-то так.

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

...это делается за пределами компонента. Плюс надо добавить selected для каждой карточки. Их может быть много. Нужно как то событиями реализовать.

1) За пределами компонента - а как иначе-то? Ведь изменение одного экземпляра компонента должно затронуть другие.

2) Добавление selected - не проблема. Делайте map массива items, закидывая в каждый элемент этот selected. Типа так. Или можете устанавливать значения selected с помощью $set в методе onCardChanged, типа так (а вот это уже действительно хак).

3) "Событиями реализовывать" - но ведь так и сделано. У вас была реализована генерация события input, обработку которого я и добавил.

UPD. Хотя можно оставить selected свойством компонента (дефолтное значение только объектом сделать), пусть хранит id элемента items и выбранный пункт выпадающего списка:

<vue-select
  :value="selected.id === item.id ? selected.option : null"
  :options="item.versions"
  @input="selected = { id: item.id, option: $event }"
></vue-select>

Владивосток - плюс 7 часов к текущему.

Это к какому текущему? Наверное, не стоит полагаться на то, что ваш код будет исполняться в каком-то конкретном часовом поясе.

Вычислить время в заданном часовом поясе можно так, например:

function getTimeInTimezone(zone) {
  const
    d = new Date(),
    utc = d.getTime() + d.getTimezoneOffset() * 60000;

  return new Date(utc + zone * 3600000);
}

Владивосток - это UTC+10, соответственно, вместо new Date(), делаем так: getTimeInTimezone(10).

Вполне себе работает:

const request = require('request');
request.get({
  url: 'https://toster.ru/q/461924',
  proxy: 'http://195.209.176.2:8080'
}, (err, res) => {
  if (err) {
    console.log('ERROR', err);
  } else {
    console.log('OK', res);
  }
});

А почему Msg? Вы же импортировали его как msg - неудивительно, что он оказывается is not defined.

Так?

slidesPerView: 4,
slidesPerGroup: 4