Use vue component that highlights menu items as you scroll the page

npm install --save vue-scrollactive

var VueScrollactive = require('vue-scrollactive');
Vue.use(VueScrollactive);

<script src="dist/vue-scrollactive.min.js"></script>

<scrollactive class="my-nav">
  <a href="#home" class="scrollactive-item">Home</a>
  <a href="#about-us" class="scrollactive-item">About Us</a>
  <a href="#portfolio" class="scrollactive-item">Portfolio</a>
  <a href="#contact" class="scrollactive-item">Contact</a>
</scrollactive>

<scrollactive class="my-nav" v-on:itemchanged="onItemChanged">
  <a href="#home" class="scrollactive-item">Home</a>
  <a href="#about-us" class="scrollactive-item">About Us</a>
  <a href="#portfolio" class="scrollactive-item">Portfolio</a>
  <a href="#contact" class="scrollactive-item">Contact</a>
</scrollactive>

// ...
methods: {
  onItemChanged(event, currentItem, lastActiveItem) {
    // your logic
  },
},
// ...

<scrollactive
  active-class="active"
  :offset="80"
  :duration="800"
  bezier-easing-value=".5,0,.35,1"
>
</scrollactive>

/**
 * Class that will be applied in the menu item.
 *
 * @default 'is-active'
 * @type {String}
 */
activeClass: {
  type: String,
  default: 'is-active',
},

/**
 * Amount of space between top of screen and the section to
 * highlight. (Usually your fixed header's height)
 *
 * @default 20
 * @type {Number}
 */
offset: {
  type: Number,
  default: 20,
},

/**
 * The selector string of the scroll container element you'd like to use. It defaults to the
 * window object (most common), but you might want to change in case you're using an element
 * as the overflow container.
 *
 * @type {String}
 */
scrollContainerSelector: {
  type: String,
  default: '',
},

/**
 * Enables/disables the scrolling when clicking in a menu item.
 * Disable if you'd like to handle the scrolling by your own.
 *
 * @default true
 * @type {Boolean}
 */
clickToScroll: {
  type: Boolean,
  default: true,
},

/**
 * The duration of the scroll animation when clicking to scroll
 * is activated.
 *
 * @default 600
 * @type {Number}
 */
duration: {
  type: Number,
  default: 600,
},

/**
 * Defines if the plugin should track the section change when
 * clicking an item to scroll to its section. If set to true,
 * it will always keep track and change the active class to the
 * current section while scrolling, if false, the active class
 * will be immediately applied to the clicked menu item, ignoring
 * the passed sections until the scrolling is over.
 *
 * @default false
 * @type {Boolean}
 */
alwaysTrack: {
  type: Boolean,
  default: false,
},

/**
 * Your custom easing value for the click to scroll functionality.
 * It must be a string with 4 values separated by commas in a
 * cubic bezier format.
 *
 * @default '.5,0,.35,1'
 * @type {String}
 */
bezierEasingValue: {
  type: String,
  default: '.5,0,.35,1',
},

/**
 * Decides if the URL should be modified with the section id when
 * clicking a scrollactive item.
 *
 * @default true
 * @type {Boolean}
 */
modifyUrl: {
  type: Boolean,
  default: true,
},

/**
 * If true the active class will only be applied when a section matches exactly one of the
 * scrollactive items, meaning it will be highlighted when scrolling exactly inside the section.
 * If false (default) it will always highlight the last item which was matched in a section,
 * even if it is already outside that section (and not inside another that's being tracked).
 *
 * @default false
 * @type {Boolean}
 */
exact: {
  type: Boolean,
  default: false,
},