Vue custom directive with function in js file

Question

I'm trying to make a custom directive in Vue to be able to use these simple tooltips. I have the tooltip javascript in a js file in the static folder which is required into the main.js file. I've turned it into a function that will run for each tooltip. The problem is that the function is undefined even though I have required the the file above. How do I use the 'makeTooltip' function in the custom directive?

MAIN.JS

import Vue from 'vue'

require('../static/js/scripts.js')    

Vue.directive('tooltip', function(el, binding){
    makeTooltip($(el), binding.value);

    $('.tooltip').click(function(){
      $('.tooltip').hide();
    })
})

SCRIPTS.JS

function makeTooltip(el, title){
    var target  = false,
        tooltip = false,
        title   = false;

    el.bind( 'mouseenter', function()
    {
        target  = $( this );
        tip     = title;
        tooltip = $( '<div id="tooltip"></div>' );

    ... 

};

For each tooltip that is trying to render I get ReferenceError: makeTooltip is not defined