how to fire vue's custom directive after mounted

Question

ll i am new to vue.js,

i want to use autonumeric into my project, then i try to use vue custom directive, but now i face a problem, which autonumeric always load the initial state / data instead of the updated data.. please kindly help me, this is my script :

var Inputmask = require('inputmask');
import AutoNumeric from "autonumeric/src/main";

new Vue({
  directives: {
    'input-mask'  : {
      bind: function (el) {
        new Inputmask().mask(el);
      },
    },
    'auto-numeric': {
      inserted: function (el) {
        new AutoNumeric(el, {
          digitGroupSeparator: '.',
          decimalCharacter   : ',',
          decimalPlaces      : 0,
        });
      },
    }
  },
  el        : '#auction-edit',
  methods   : {
    async submit() {
      this.loading = true;
      try {
        let {data}           = await axios.patch(this.dataAuctionUpdate + '/' + this.skey, {
          name           : this.name,
          description    : this.description,
          start_time     : this.start_time,
          finish_time    : this.finish_time,
          open_bid_price : this.open_bid_price.replace(/\./g, ''),
          next_bid_price : this.next_bid_price.replace(/\./g, ''),
          close_bid_price: this.close_bid_price.replace(/\./g, ''),
        });
        this.success         = {...data};
        window.location.href = this.adminAuction;
      } catch (e) {
        this.error = {...e.response.data};
      }
      this.loading = false;
    },
    async getData() {
      try {
        let {data}           = await axios.get(this.dataAuctionShow + '/' + this.skey);
        this.name            = data.name;
        this.description     = data.description;
        this.start_time      = data.start_time;
        this.finish_time     = data.finish_time;
        this.open_bid_price  = data.open_bid_price.toString();
        this.next_bid_price  = data.next_bid_price.toString();
        this.close_bid_price = data.close_bid_price.toString();
      } catch (e) {
        this.error = {...e.response.data};
      }
    },

    async refresh() {
      this.name            = '';
      this.description     = '';
      this.start_time      = '';
      this.finish_time     = '';
      this.open_bid_price  = '0';
      this.next_bid_price  = '0';
      this.close_bid_price = '0';
      this.permissions     = {};
      this.error           = {};
      this.success         = {};
      this.loading         = false;
      await this.getData()
    }
  },
  data      : {
    name             : '',
    description      : '',
    start_time       : '',
    finish_time      : '',
    open_bid_price   : '0',
    next_bid_price   : '0',
    close_bid_price  : '0',
    permissions      : {},
    error            : {},
    dataAuctionUpdate: '',
    dataAuctionShow  : '',
    adminAuction     : '',
    success          : {},
    loading          : false,
    skey             : '',
  },
  async mounted() {
    this.dataAuctionUpdate = $('meta[name="data-auction-update"]').attr('content');
    this.dataAuctionShow   = $('meta[name="data-auction-show"]').attr('content');
    this.skey              = $('meta[name="skey"]').attr('content');
    this.adminAuction      = $('meta[name="admin-auction"]').attr('content');
    await this.getData();
  }
});

instead of showing the formatted value, it shows unformatted value at the beginning, then when on mouse over it turn to 0 which is the initial value of vue data, please help, and thank you so much..