0xD34F

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

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

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

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

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

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

Если совпадения должны быть по обоим: 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/

<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/

Добавляете 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>

Vue не может отследить прямую установку значения по индексу.

Используйте set: Vue.set(data.cardData, 0, 'hello, world!!');.
Или splice: data.cardData.splice(0, 1, 'fuck the world');.

Работает для обоих элементов, просто scrolled - он у вас один. Поэтому он всегда принимает значение, соответствующее последнему элементу - успешно установленное true при обработке первого элемента затирается false'ом, устанавливаемым при обработке второго.

Насколько я понял, должно быть так.