Google has been released guidance for creating lazy load images with IntersectionObserver that I think very nice if we also have Vue.js implementation based on that article.
The Idea is creating vue directive that wrapping all those logic.

Base Example
Base example will be based on https://developers.google.com/web/fundamentals/performance/lazy-loading-guidance/images-and-video/

Details about the Value
Lazy load was very critical and has been basic implementation when we talk about first load speed tuning, but with many library in vue.js that have been implemented this things people will have confuse what the basic work if they need to create their own lazy load implementation.

In this cookbook, we will guide user to learn creating lazy load image based on Google's article with very basic function.

Real-World Example
We will also creating sample and demo about this cookbook, so user can be learn how to implementing in real world project.

When To Avoid This Pattern
Using IntersectionObserver was great, but as we know IntersectionObserver is very new and have no good support for old browser. So when your web apps need to support all this old browser, we need to use a classic lazy load except you prefer to add polyfill.

Alternative Patterns
We can use fallback when IntersectionObserver not supported, usually we can attached scroll event and replace image placeholder with original one. But we can also doing switch off the lazy load if we want simpler implementation.

P.S: I haven't working to create PR, but will do soon when the core teams approve about this proposal.