Vue.js <lazy-component><コンポーネントのイベントが発火しない/></lazy-component>

コンポーネントを遅延読み込みしたい

SSRのNuxtで遅延読み込みを実行してくれるライブラリであるVue-Lazyloadをコンポーネントモードで使っていて、つまりました。

main.vue

<div v-for="image of images" :key="image.index">
    <image-thumbnails @showModal="modalOn"/>
</div>

image-thumbnailsコンポーネントは画像のサムネイルを表示するコンポーネントで、サムネイルがクリックされるとshowModalイベントを発火します。
メインコンポーネントはshowModalイベントを検知すると、モーダルで画像を表示します。

サムネイルが多くなりそうなので、遅延読み込みしてほしいと思い、以下のように記述しました。

main.vue

<div v-for="image of images" :key="image.index">
    <no-ssr>
        <lazy-component>
            <image-thumbnails @showModal="modalOn"/>
        </lazy-component>
    </no-ssr>
</div>

なんということでしょう。
メインコンポーネントがimage-thumbnailsコンポーネントのshowModalイベントを検知できなくなりました。
多分、遅延読み込みのせいでイベント監視をバインドできなかったんでしょう。

内側に遅延処理を書く

次のように書いて解決しました。

main.vue

<div v-for="image of images" :key="image.index">
    <image-thumbnails @showModal="modalOn"/>
</div>

imageThumbnails.vue

<template>
    <no-ssr>
        <lazy-component>
            ....
        </lazy-component>
    </no-ssr>
</template>

遅延読み込みしたいコンポーネント内のルートにlazy-componentを記述すると、遅延読み込みされるし、イベント処理もうまくいきました。