How to make universal scrollspy?

Question

Vue.js

I was surprised to encounter the fact that in fact there is not a single vanilla or View scrollspy plugin that would work fine (and even those that are crooked 2-3 pieces). Everything else is in jQuery. So I wanted to do it myself. I made an elementary sketch for one element and then I realized that everything is not so simple.
How to make this a universal tool? How to assign data properties for all objects (to which I will bind the style assignment), how to assign a separate handler for each element to be tracked, and so on and so forth. Ideally, you need to list block elements somewhere in one place, or assign them a common class, and then, by changing data properties, assign classes to the corresponding links that refer to these elements.
All the necessary functionality is implemented here, but only for one Second element - https://codepen.io/kodej/pen/MEzNwm
I ask for help, how to implement such logic?

Answer 1

Well, probably, data should contain an array of objects describing blocks. Instead of the boolean value of activity, work with the number of the active block. Instead of manually writing the markup for each block, use v-for. Somehow so .