Сохранение выбранных значений фильтров элементов в компоненте списка после возврата из просмотра компонента элемента

После того, как пользователь вернется из просмотра компонента элемента (вопроса), я пытаюсь сохранить отфильтрованный список вопросов пользователя на основе двух вариантов выбора (категория и подкатегория) и выбранной страницы из разбиения на страницы в компоненте списка вопросов.

Я новичок в среде Vue и не уверен, что следую лучшим практикам, но вот что я пытался сделать:

1- Я пытался использовать шину событий, но достиг точки, когда я могу получить объект, содержащий объект категории вопроса, для основного компонента, а затем он будет использоваться в качестве атрибута внутри метода Onchange, который обычно запускается после события выбора категории. Мне удалось показать пользователю тот же список отфильтрованных элементов, однако проблема с этим подходом в том, что: a- Я не могу обновить значения выбора, чтобы показать выбранные параметры, которые дали список вопросов. Я попытался получить выбранный элемент, используя атрибуты ref, однако элемент select не определен, хотя я поместил его на этап жизненного цикла mounte. Он работает с уродливым хаком, используя метод setTimeout, и показывает элемент через одну секунду. b- Отфильтрованный список элементов разбит на страницы, и этот подход не показывает пользователю ту же страницу, с которой он выбрал элемент. c- Повторный вызов сервера

2- Я попытался сохранить глобальное значение в файле миксинов, однако после сохранения значения в файле миксинов и хотя значение объекта получено в файле миксинов, но после обновления данных миксинов и последующего вызова его из списка вопросов, он возвращает пустой объект.

3- Я пытался использовать keep-alive

Код для подхода 1:

Объект категории нетерпеливо загружается с вопросом, используя генерацию события. После того, как пользователь возвращается к просмотру вопроса, я передаю объект категории с событием, используя метод beforeDestroy:

beforeDestroy () {
      EventBus.$emit('backToQuestions', this.question.category);
  }

Вот как выглядит объект категории:

{…}=>
__ob__: Object { value: {…}, dep: {…}, vmCount: 0 }
created_at: 
id: 
parent_id: 
title: 
updated_at: 

Вот как я заполняю список отфильтрованных вопросов

created () {
    EventBus.$on('backToQuestions', category => {
          this.onChange(category)
      });
    this.fetch(`/categories`);
}

Мой выбор:

<div class = "col-md-4">
  <select ref = "main" class = "form-control" v-model = "mainSelected"  @change = "onChange(mainSelected)">
   <option  disabled value = "">Questions Category (All)</option>
   <option v-for = "option in parentCategories" :value = "option">{{ option.title }}</option>
  </select>
</div>
<div  v-if = "subCategory" class = "btn-group">
  <select class = "form-control"  v-model = "subSelected"  @change = "onChange(subSelected)">
   <option  disabled value = "" selected >{{ categoryTitle }} Qs Categories</option>
   <option v-for = "option in childCategories" :value = "option">{{ option.title }}</option>
  </select>
</div>

Ниже приведен мой метод onChange только для справки:

  onChange(option) {
        this.categoryOption = option;
        this.dataReady = false;
        this.subCategory = true;
        this.questions= {};
        this.questionsArray =[];
        this.categoryTitle = option.title;
        this.categoryId = option.id;
        if (option.children){
            this.childCategories = option.children;
        }
        axios.get(`/categories/${this.categoryId}`)//getting the category questions
        .then(({data}) =>  {
            this.questions = data;
            this.questionsArray.push(...data.data);
            this.nextUrl = data.next_page_url;
            this.dataReady = true;
            this.emptyCheck(this.questionsArray);
        })
        .catch((err) => {
           swal("Failed!", err.response.data.message, "info");
           this.$router.push('dashboard') ;
        })
      }

$refs выбранных div всегда возвращают undefined, если только я не использовал setTimeout.

Код для подхода 2:

После включения файла миксинов в оба компонента я добавляю в миксины следующий код:

  setCategory (questionCategory) {
       console.info("TCL: setCategory -> questionCategory", questionCategory)
        this.category = questionCategory;
       console.info("TCL: setCategory -> this.category", this.category)
        }
        ,
        getCategory () {

            return this.category ;
        }

Значение объекта, полученное методом set, правильное, но после обновления метода данных миксинов this.category возвращает только следующее:

__ob__: Object { value: {…}, dep: {…}, vmCount: 0 }

т. е. без сведений об объекте категории. Я попытался преобразовать объект в строку, а затем вызвать его, this.category показывает пустую переменную.

3- Используя keep-alive, однако это не работает, я попытался обернуть как router-view, так и router-link.

   <keep-alive include = "questions-list">
       <router-link  to = "/questions-list" class = "nav-link">
           <i class = "nav-icon fas fa-question-circle  orange"></i>
           <p>
               Questions
           </p>
       </router-link>
   </keep-alive>

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

Извините за длинный вопрос, но я некоторое время застрял с этим, и это ядро ​​​​моего приложения.