Changing to different column number on breakpoint deletes then re-adds child tiles

[stevencherry1]

I have my page set up by default to 2 columns, then switch to 1 column when i hit a width breakpoint. When this transition happens, all the child tiles get deleted, then re-added to page. This triggers each child tile's 'mounted' function. Is there any way to trigger the breakpoint without recreating all child tiles?

My html looks like this:

<masonry
          :cols="{default:2, 939: 1}"
          :gutter="10">
                   <component v-for='tile in tiles' :is='tile.VueComponentName' class='grid-item'></component>
 </masonry>

Edit: The true root issue i'm having, is that when i refresh the page at the lower breakpoint, the masonry renders the default breakpoint first, and then renders the lower breakpoint, causing mounted to run twice on page load. This is combined with some CKEditors on my page, which get messed up because of the very quick attach/detach.

[artkondakov]

Same thing. Works good if I set default number of columns only, but re-renders if I add breakpoints

UPD. I found how to fix it. At initial render plugin use default number of columns (set in props defaults), and only at mounted calls reCalculateColumnCount. So if your app doesn't run in SSR mode you can call reCalculate on component init.