How to change component on scroll vue js?

Question

Vue.js

There is a site, each page is occupied by 100% of the height:
- on the first page (component 1) there is a square;
- on the second page (component 2) there is a circle;
Question:
How can I make it so that when scrolling down or up, switching between components occurs? I want to make a smooth transition between components, as the design implies smoothness.
Thanks in advance.

Answer 1

Subscribe to the scroll event, change one component to another.

Answer 2

For smoothness, you can use the internal features of the view