What is the reason of "Cannot read property 'insertInto' of undefined" error in MarkoJS component?

Question

I usually face the above error when doing some changes to a component by listening to the window resize event. I think this happens because somehow the component will get dirty during the update and need rerender. But what is the solution if changing the component's children input state during resizing the window is required?

Here is the error:

helpers.js:2 Uncaught TypeError: Cannot read property 'insertInto' of undefined
    at insertBefore (helpers.js:2)
    at morphChildren (index.js:235)
    at morphEl (index.js:749)
    at morphChildren (index.js:293)
    at morphEl (index.js:749)
    at morphChildren (index.js:293)
    at morphEl (index.js:749)
    at morphChildren (index.js:293)
    at morphEl (index.js:749)
    at morphChildren (index.js:293)
    at morphEl (index.js:749)
    at morphChildren (index.js:293)
    at morphEl (index.js:749)
    at morphChildren (index.js:293)
    at morphEl (index.js:749)
    at morphChildren (index.js:293)
    at morphEl (index.js:749)
    at morphChildren (index.js:500)
    at morphEl (index.js:749)
    at morphChildren (index.js:293)
    at morphEl (index.js:749)
    at morphChildren (index.js:293)
    at morphComponent (index.js:125)
    at morphChildren (index.js:246)
    at morphEl (index.js:749)
    at morphChildren (index.js:293)
    at morphdom (index.js:758)
    at Component.js:541
    at Object.batchUpdate [as ___batchUpdate] (update-manager.js:63)
    at VehicleSlider.___rerender (Component.js:523)
    at VehicleSlider.update (Component.js:477)
    at updateComponents (update-manager.js:44)
    at updateUnbatchedComponents (update-manager.js:16)
    at MfQN.module.exports (_invoke.js:5)
    at queue.<computed> (_task.js:35)
    at Number.run (_task.js:21)
    at MessagePort.listener (_task.js:25)

Here is the component code:

import { box } from "src/lib/mobx-box"
static let throttle = require("src/js/throttle-debounce").throttle

static {
    require("./VehicleSlider.scss")
}

class {
    mobxObservable() {}
    onCreate() {
        box(this, "currentSlide")
        this.currentSlide = 1
        this.state = {
            perPage: null
        }
    }

    next() {
        this.getComponent("slider").next()
    }
    prev() {
        this.getComponent("slider").prev()
    }
    sliderChange(slider) {
        this.currentSlide = slider.currentSlide
    }
    onUpdate() {
        this.updatePerPage()
    }
    onMount() {
        this.updatePerPage()

        this.subscription = this.subscribeTo(window).on("resize", throttle(()=>{
            this.updatePerPage()
            debug("RESIZE", this.state.perPage)
        }, 200, {leading: true}))

    }

    updatePerPage() {
        var sliderEl = this.getEl('vehicleSlider');
        if(sliderEl) {
            const width = sliderEl.clientWidth
            const items = Math.floor(width / 270)
            this.setState('perPage', items)
        }
    }
}
<div key='vehicleSlider' class="vehicle-slider">
    <button class="slick-prev slick-arrow" aria-label="Previous" type="button" on-click('prev')>Previous</button>
    <if(state.perPage >= 1)>
    <Slider key='slider' loop auto=0 duration=600 style={'flex-grow': '1'} perPage=state.perPage  on-change('sliderChange')>
        <for(vehicle in input.vehicles)>
            <@slide> <${vehicle.renderBody}/> </>
        </for>
    </Slider>
    </if>

    <button class="slick-next slick-arrow" aria-label="Next" type="button" on-click('next')>Next</button>
</div>