How to solve ctrl + f5 issue in vue.js?

Question

Vue.js

This error occurs if you refresh the page with ctrl + f5:

Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'style' of null"

Why is this happening and how to deal with it?

DESCRIPTION:
Mounted(){...} hook calls an action in vuex.
In the action, the following happens
in data, an object with the values ​​of selector classes is stored, which is taken from localestorage

set_favourites_movies(state, data) {
            state.favouritesMovies = data;
            let arr = [];
            for (let key in data) {
                arr.push(data[key]);
            }
            for (let key of arr) {
                document.querySelector(key).style.color= "red";
            }
        },

That is, an object with values ​​is taken (values ​​are selector classes) from localestorage, then the values ​​​​from this object are written to an array, then this array is sorted out and color is changed for each selector using document.querySelector .

Thus, when you refresh the page, the color is dynamically set to those classes that are in localeStorage.

The problem is that if you just refresh the page with f5, then everything works, but when you refresh with
ctrl + f5, the following error occurs in the console:

Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'style' of null"

Answer 1

Given the previous comments - work with promises.

Answer 2

Apparently, selectors get into localstorage later than document.querySelector(key) reads them. With a simple F5, storage still has these values, so it reads normally. With ctrl+F5 storage is cleared and the first time there is nothing there, until something fills it up.