How to use vue-scroll

I have a use-case where I want to change CSS class dynamically based on scroll postiion, which is described here.

I was thinking of using vue-scroll for this. I made following changes:

Installing using npm:

npm install vue-scroll --save

made following changes in main.js:

import Vue from 'vue'
import vScroll from 'vue-scroll'
Vue.use(vScroll)

added following in one of the component, where I want to use it:

<div  v-scroll="onScroll">
   ...
   ...
   <p>scrollTop:<span>{{position &&  position.scrollTop}}</span></p>
   ...
   ...
</div>

and following changes in the component:

export default {
  data () {
    return {
      position: null
    }
  },
 methods: {
    onScroll (e, position) {
      console.log('comes here ' + position)
      this.position = position
    }
},

However this is not working, I also tried to register this as a directive in main.js, like following, but this also did not help.

const app = new Vue({
  router,
  store,
  el: '#app',
  template: '<App/>',
  components: { App }, // Object spread copying everything from App.vue
  directives: {
    'v-scroll': vScroll  // tried 'vScroll': vScroll as well
  }
})

What can be possible reason of this not working.