How to add class to menu item on scroll in Vue.js?

Question

Vue.js

Hello. There is such a landingpage menu, when you click on the link of which the page will scroll down to the required section. In this case, it is necessary to highlight the current menu item in a different color (add the 'active' class to the current element and remove it from others). How can this be implemented in Vue.Js?

<ul class="menu-list">
  <li><a class="menu-list-item" href="#about">About Me</a></li>
  <li><a class="menu-list-item" href="#users">Users</a></li>
  <li><a class="menu-list-item" href="#register">Register</a></li>
</ul>
<section id="about">about</section>
<section id="users">users</section>
<section id="register">register</section>

Answer 1

Good day, I assume that this section of the documentation will help you)
https://ru.vuejs.org/v2/cookbook/creating-custom-s...