VueJS: when images are fully loaded, vue doesn't see dimensions?

Question

Vue.js

I write components for working with a grid. I ran into a problem with getting image sizes when loading a component.
As an example, I will give components that will clearly show the problem.
There is an AppMasonry component that accepts slots. Slots in turn are AppMasonrySlot components (for reactivity).
Since AppMasonry contains component slots, every time you change the $children property of the AppMasonry component, the updated hook will work, in which I call the grid redraw function.
I get images from unsplash.com api. Before inserting slots, I preload images using the imagesloaded plugin.
So, after introducing you to the course of the matter, I will describe the problem:
After the images are preloaded and slots with the AppMasonrySlot components are inserted into the AppMasonry component, when the updated hook is triggered in the AppMasonry component, I call the redraw function and the grid is redrawn.
But, if you clear the browser cache, namely "Images and other files stored in the cache" and reload the page, then in the grid redrawing function, for each element, the width and height dimensions are equal to zero. That is, as I understand it, the updated hook in the AppMasonry component works faster than the images are rendered in the browser.
This can still happen if the page is quickly reloaded, over and over again.
Please tell me how this problem can be solved?
Here is an example sandbox
In advance, I ask you not to suggest installing existing plugins, I'm not going to rewrite Masonry, I have other tasks on grids, more specific ones, and all the names of the components in the example and the example itself are described only for the purpose of describing the problem.

Answer 1

Solved a problem. It turned out that this is due to the imagesLoaded plugin. I wrote the preload myself and now everything works fine!
PS: Do not use the imagesLoaded plugin, so as not to suffer later)
Sandbox with edits