まずライブラリで対応出来ないか検討した。
vue-infinite-scroll
サンプルを触ってみたところ、infinite-scroll-distanceでしきい値を決めて、その高さが画面に入ったらローディングを初めるライブラリのようだ。
vue-infinite-loading
サンプルを触ってみたところ、vue-infinite-scrollと同じくdistanceでしきい値を決めて、その高さが画面に入ったらローディングを初める。
infinite-scroll-distanceとの違いは、おそらく<infinite-loading :on-infinite="onInfinite"></infinite-loading>を書いた場所の親要素の下部がしきい値になっていることである。
https://peachscript.github.io/vue-infinite-loading/#!/spinners によると、ローディングのデザインは5種類から選ぶことが出来る。
v-ifを使うことで、ローディングを終了することが出来る。
https://peachscript.github.io/vue-infinite-loading/#!/properties
まとめ
vue-infinite-loadingを使うことにした。