Issue using waypoint with vue.js

I am using vue.js and I want to include waypoints.

My original, working, script:

html:

<div id="final">
  <h2>Mostar el mensaje al pasar por aqui</h2>
</div>

script:

var ele
var waypoint = new Waypoint({
  element: ele = document.getElementById('final'),
  handler: function(direction) {
    if (direction == 'down') {
      $(ele).addClass('muestra')
    } else {
      $(ele).removeClass('muestra')
    }
    console.log(direction);
  }
});

css:

.muestra {
  position: fixed;
  bottom: 20px;
  right: 20px;
}

I'm trying to use this code in vue.js, but it gives me this message in the console:

Uncaught ReferenceError: Waypoint is not defined

This is the code in vue.js:

galeri.vue:

<template>
  <div id="final">
    <h2>Mostar el mensaje al pasar por aqui</h2>
  </div>
</template>
<script>
  var ele
  var waypoint = new Waypoint({
    element: ele = document.getElementById('final'),
    handler: function(direction) {
      if (direction == 'down') {
        $(ele).addClass('muestra')
      } else {
        $(ele).removeClass('muestra')
      }
      console.log(direction);
    }
  });
</script>

Any idea what I am doing wrong?

Since you installed waypoints via npm install waypoints you need to require it in your file like so:

<script>
require('waypoints/lib/noframework.waypoints.js')

var waypoint = new Waypoint({ 
  // ... 
})
</script>

Found on the waypoints Github.