Вот такой вариант, наверное он не оптимальный, но вроде решает задачу разделения данных: https://codepen.io/kerf/pen/gWzZVB .
Смысл в том, что когда нужно отображать какой-то шаблон для ячейки, то создаем отдельный компонент. В родителе описываем объект свойств, которые нужно передать и вешаем обработчик.
Мне кажется не стоит так делать, у вас есть данные в массиве, зачем их смешивать с шаблоном отображения. Докрутите сам шаблон, чтобы он отображал чекбокс если имя колонки равно inStock.
Вам нужно что-то типа вот такого `item in array | filterBy(input)` и далее реализовать сам фильтр. Хотя не могу сейчас проверить будет ли работать в таком варианте. Обычная практика использовать вычисляемое свойство, которое будет содержать необходимые элементы и писать сразу вот так: `item in filteredArray`.
Как вариант реализовать компонент, отвечающий за задачу, передавать туда данные для задачи через пропсы и генерировать событие при ответе юзера на эту задачу с объектом ответа. В родительском компоненте обрабатывать событие через нужный обработчик, переключать на след.задачу и.т.д...
Можно использовать mapState или mapGetters для проброса значений из стора, так будет минимум glue кода, т.е. в вашем случае в компоненте можно написать:
import {mapState} from 'vuex'
...
computed: {
...mapState(['session'])
}
Не происходит изменение маршрута, поэтому роутер молчит. Когда вы ставите курсор и нажимаете ввод, то браузер принудительно загружает страницу по указанному пути. А у вас похоже логика работы с параметрами запроса сидит где-то в хуках жизненного цикла компонента и они в вашем варианте не срабатывают.
Можно обернуть компонент в <transition> и назначить ему произвольную анимацию.
Может замедление отрисовки у вас происходит из-за того, что вы данные подгружаете для этих компонентов. Т.е. данные приходят порциями и после каждой порции вы отображаете соответствующий компонент? Тогда стоит сначала все данные принять, а потом все сразу отрендерить.