Компонент рендеринга при изменении наблюдаемого значения в MobX

Question

Я работаю над простым приложением, использующим React, Typescript и MobX.Пользователь может выполнять поиск в репозиториях GitHub с помощью API и отображать результаты в виде карточек.Каждая карта может быть сохранена в localStorage.Проблема в том, что когда я нажимаю «Сохранить», карта не отображается в компоненте с «Сохраненными репозиториями» одинаково, пока я не обновлю страницу.Итак, в компоненте Card у меня есть этот метод, который изменяет наблюдаемое в магазине:

  saveRepo = (e: any) => {
    const { reposStore } = this.props!
    e.stopPropagation()
    let storage = JSON.parse(window.localStorage.getItem("repositories") || "[]")
    if (!storage) {
      storage = []
    }
    storage.push(this.props.repoItem)
    window.localStorage.setItem("repositories", JSON.stringify(storage))
    this.setState({
      added: false
    }, () => reposStore ? reposStore.refresh = !reposStore.refresh : null)
  }

Это хранилище:

import { observable, action, decorate } from "mobx"

const APIQuery = "https://api.github.com/search/repositories?q="

export default class Repos {

  repositories: any = []

  refresh: boolean = false

  fetchData(input: string) {
    fetch(`${APIQuery}${input}`)
      .then(res => res.json())
      .then(data => this.repositories = data.items)
  }

}

decorate(Repos, {
  refresh: observable,
  fetchData: action,
  repositories: observable
})

const ReposStore = new Repos()
export { ReposStore }

В компоненте с сохраненными репо я пытаюсь получить реквизитыс методом componentDidUpdate, но не получено реквизита ...

Компонент SavedRepos:

  state = {
    refresh: true
  }

  componentDidUpdate(prevProps: any) {
    const { reposStore } = this.props
    if (reposStore!.refresh !== prevProps.reposStore.refresh) {
      this.setState({
        refresh: !this.state.refresh
      })
    }
  }

Если я использую этот метод, он работает только один раз (когда я сохраняю карту вlocalStorage показывает то же самое время в компоненте, но когда я сохраняю второй элемент, ничего не происходит):

  componentDidMount() {
    const { reposStore } = this.props
    if (reposStore) {
      when(
        () => reposStore.refresh,
        () => {
          this.setState({
            refresh: !this.state.refresh
          })
        }
      );
    }
  }

Я прочитал много документации и потоков, но не могу найти ответ на этот вопрос.Как сделать рендеринг компонента при изменении @observable?