0xD34F

Дело в том, что значение pickeds задаётся лишь единожды - при создании экземпляра компонента app-some, так что странно ожидать, что оно изменится - вы этого нигде не делаете.

Не знаю, чего конкретно вам надо, но... Чтобы чекбоксы переключились, есть варианты:

• Отказаться от внутреннего массива, использовать параметр. Типа так.
  
• Использовать computed вместо data. Типа так.
  
• Задать key для app-some, это приведёт к созданию нового экземпляра компонента при изменении activeId. Типа так.
  

Используйте mounted вместо created:

mounted() {
  this.$refs.textArea.addEventListener(...

Так?

что-то мне подсказывает, что сам подход не верен

Ну в общем да, проблемка есть - унеся всю логику в computed (чего вообще делать не надо, т.к. computed для подобного не предназначены), затруднительно определить, какой из чекбоксов изменил последним своё состояние. Если выбран один чекбокс "секция №" и "все", что надо делать - снять первый или второй? Непонятно.

возможно вообще стоит разделить all и остальной список чекбоксов?

Да, так тоже можно.

Раз selected у вас массив - указывайте индекс, замените v-model="selected" на v-model="selected[i]".

Если вдруг напрягают null, которые vue подставляет для индексов без установленных значений, то массив можно заменить объектом.

Вам тут не фильтр нужен, а computed свойство или метод.

Наверное, child изначально в model отсутствуют, да? Попробуйте

self.model.child = response.data.folders;

заменить на

self.$set(self.model, 'child', response.data.folders);

Можно использовать Vue.compile для компиляции шаблона, и определить собственную render-функцию, которая будет использовать результат компиляции. Как-то так.

https://github.com/SortableJS/Vue.Draggable

Есть даже демо для вашего случая.

Есть такая штука - nextTick. С ёё помощью можно вызвать функцию после обновления DOM-дерева. Т.е., делайте так:

this.stage = 1;
this.$nextTick(() => {
  const elem = document.querySelector('.elem');
  ...
});

Первое, на что стоит обратить внимание - sectionVal, который вы пытаетесь вывести, он один на все строки. Так у вас везде будет одно и то же. Наверное, стоит сделать sectionVal объектом, ключами будут id строк, значения - то что вы будете получать в результате своего запроса.

Ну а дальше всё просто - в методе section просто обновляете sectionVal по id строки, типа так (запроса понятное дело нет, просто дублируются введённые данные, но думаю, принцип понятен).

Проблема не в фильтре, а в способе замены. Чтобы заменить все пробелы, вместо строки выполняйте поиск по регулярному выражению с модификатором g:

Vue.filter('lhprob', val => val && val.toString().replace(/ /g, 'GG'));

P.S. Ну и это, вот ещё что - определяйте фильтр до инициализации приложения, а не после. А то при первом рендеринге в консоль падает [Vue warn]: Failed to resolve filter.

get () { this.$store.getters['newRequest/selectedCreditStatus'] }

Нигде return не потеряли?

Замечу, что, не хотелось бы отказываться от геттеров и сеттеров в пользу всяких data () {} и methods: {}. Уже делал в таком варианте и получилось довольно громоздко и некрасиво.

Если вдруг откажетесь (если что, я этого делать не призываю), ничего громоздкого писать не придётся, класть в data ничего не нужно, создавать метод не обязательно. Чем является v-model? - это привязка значения + прослушивание события. Т.е.,

:value="геттер" + @input="мутация($event.target.value)"

Не знаю, что ещё можно добавить к уже сказанному в документации. Думаю, наглядная демонстрация поможет лучше понять, что к чему.

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

Vue использует алгоритм, минимизирующий перемещение элементов

а во втором

Vue изменяет порядок следования элементов, основываясь на изменении порядка ключей

data: () => ({
  value: '',
}),
computed: {
  style() {
    return {
      width: `${20 + this.value.length * 10}px`,
    };
  },
},

<input v-model="value" :style="style">

Передавайте в метод объект товара, и там уже делайте его count'у +/-1:

<i class="icon-arrow-down" @click="updateCount(good, -1)"></i>
<i class="icon-arrow-top" @click="updateCount(good, 1)"></i>

methods: {
  updateCount(good, change) {
    good.count = Math.max(0, good.count + change);
  },
},

Добавим в компонент свойство, указывающее, сколько элементов надо отображать:

data: () => ({
  numShow: 0,
  ...

С его помощью будем получать массив отображаемых элементов:

computed: {
  itemsToShow() {
    return this.items.slice(0, this.numShow);
  },
  ...

Создадим методы для показа следующего или скрытия предыдущего элемента - для этого достаточно делать +/- 1 количеству отображаемых элементов:

methods: {
  showNext() {
    this.numShow = Math.min(this.items.length, this.numShow + 1);
  },
  hidePrev() {
    this.numShow = Math.max(0, this.numShow - 1);
  },
  ...

Повесим этим методы в качестве обработчиков событий завершения показа и скрытия элемента:

<transition-group
  @after-enter="showNext"
  @after-leave="hidePrev"
  ...
>
  <div 
    v-for="(n, i) in itemsToShow"
    :key="n.id"
    ...
  >
  ...

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

methods: {
  run() {
    this.numShow += ({
      0: 1,
      [this.items.length]: -1,
    })[this.numShow] || 0;
  },
  ...

https://jsfiddle.net/6Ljzpeu2/

А вообще, в документации есть пример на эту тему.

Добавить два свойства - массив, описывающий типы, и тип, данные которого надо отобразить:

data: () => ({
  types: [
    { id: null, name: 'Все' },
    { id: ..., name: '...' },
    { id: ..., name: '...' },
    ...
  ],
  active: null,
  ...

Дать пользователю возможность выбирать тип отображаемых данных:

<button v-for="n in types" @click="active = n.id">{{ n.name }}</button>

<!-- или -->

<select v-model="active">
  <option v-for="n in types" :value="n.id">{{ n.name }}</option>
</select>

<!-- или -->

<label v-for="n in types">
  <input type="radio" name="type" :value="n.id" v-model="active">
  {{ n.name }}
</label>

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

computed: {
  filteredItems() {
    const { items, active } = this;
    return active ? items.filter(n => n.type === active) : items;
  },
  ...

Показать результат фильтрации:

<tr v-for="(n, i) in filteredItems">
  ...

https://jsfiddle.net/jhekutv3/

Индекс не нужен, передавайте сразу элемент массива:

v-on:edit="editText($event, item)"

Сам editText будет при этом выглядеть следующим образом:

editText(operation, item) {
  item.text = operation.api.origElements.innerHTML;
},

Неуместное использование стрелочных функций. В результате this внутри методов оказывается вовсе не экземпляром компонента. Соответственно, вы ни к каким свойствам компонента не имеете доступа.