Convert Jquery Code to JavaScript

How to convert JQuery to Vue.js Script

Add the scroll event handler in the mounted() function and change the isSticky variable there.

export default {
  data: () => ({
    isSticky: false,
  }),
  mounted() {
    this.scroll_event_handler = () => {
      this.isSticky = window.scrollY > 50;
    }
    window.addEventListener("scroll", this.scroll_event_handler);
  },
  unmounted() {
    window.removeEventListener("scroll", this.scroll_event_handler);
  },
}

Then in your template you can add/remove the class like this:

<nav class="navbar-fixed-top" :class="{'top-nav-collapse': isSticky}">
    ...
</nav>

how to convert Jquery line of codes into vue

You don't need to convert anything. You just need to read the first few chapters in the Vue documentation.

var app = new Vue({
  el: '#app',
  data() {
    return {
      active: 1,
      step: ['step 1', 'step 2', 'step 3'],
    }
  },
})

.activeClass{
  color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <ul>
    <li
      v-for="(items, index) in step"
      :key="items"
      :class="(index === active) ? 'activeClass' : ''"
      v-text="items"
    />
  </ul>
</div>