[Vuejs]-How to use Cleave js/Vue-Cleave as a directive to input element in Vuejs?

This is the way I solved this problem:

Template:

<b-input type="tel" name="phone" ref="kPhone" v-model="phoneNumber" icon="phone"></b-input>

Script:

mounted() {
let element = this.$refs.kPhone.$el.querySelector('input');
new Cleave(element, {
  phone: true,
  phoneRegionCode: "US",
  delimiter: "-"
});
}