'How can i react to route change and set value of computed propery even if its value did not change in Nuxt - Vue

I have a list of articles on the page and a load more button, and I need to implement a scroll to article after I come back from the article page to the main page. To keep the articles that were loaded after clicking load more button I store them in state store and the array itself is in the computed property like so:

  computed: {
    items() {
      return this.$store.getters["article-scrollto/getArticlesLoaded"];
    },
}

in mounted the init() function is being run and in this function I populate store variable with initial data

this.$store.commit("article-scrollto/setInitialArticles", items);
//and this is the setter
  setInitialArticles(state, articles) {
    if (state.articlesLoaded.length === 0) {
      state.articlesLoaded = [...articles];
      console.log({ initsetter: state.articlesLoaded });
    }
  },

when the load more button is clicked in onCLick function I add data to the state like so:

  setArticlesLoaded(state, articles) {
    const benchmark = new Set();
    state.articlesLoaded.forEach((item) => {
      benchmark.add(item.title);
    });
    articles.forEach((article) => {
      if (!benchmark.has(article.title)) {
        state.articlesLoaded = [...state.articlesLoaded, article];
      }
    });
  },

And then when I click on the article and the route is changed, and then I come back to the article list technically the store data does not change and my computed property getter does not trigger, and I get no articles even though there are many in the store. I have tried to repopulate items() computed property in the mounted hook like so:

    const storeArticles =
      this.$store.getters["article-scrollto/getArticlesLoaded"];

    if (storeArticles.length) {
      console.log({ storeArticles });
      this.items = [...storeArticles];
      console.log({ itemsRefilled: this.items });
    }

and it does show that there are items in this.items(), but there was no re-render and I get no articles on the page and in the console I have a warning saying that:

[Vue warn]: Computed property "items" was assigned to but it has no setter.

I read about computed setters, and it seems that I can set another data properties value from within computed property, not the value of computed property. Can you please hint me how should I deal with it? Thanks a lot



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source