A Vue directive has five possible hooks. We used just one, bind. It's bound directly to the element and component. It gets three arguments: element, binding, and vnode.
When we add the directive in the main.js file to Vue, we make it available everywhere in our application, so the directive is already at App.vue to be used by the input.
At the same time we call v-input-mask on the input element, we pass the first argument, element, to the directive, and the second argument, binding, is the value of the attribute.
Our directive works by checking each new character value on the input. A Regex test is executed and validates the character to see whether it is a valid character on the token list that was given on the directive instantiation. Then, it returns the character if it passes the test, or returns nothing if it's an invalid character.