object-typed-mask.vue

<template>
  <v-content>
    <v-text-field :clearable="true" v-model="input" v-bind="getMask">
    </v-text-field>
    {{ input }} &nbsp; {{ type }}
  </v-content>
</template>

<script>
import phoneMask from 'assets/libphonenumber-formatter' // npm libphonenumber-js

export default {
  data() {
    return {
      maskCase1: 'phone', // Existing
      maskCase2: 'numeral', // New: Format numeral
      maskCase3: { // New: Format numeral with custom options
        prefix: 'MYR$ ',
        suffix: ' cent',
        positiveOnly: false,
        // positiveSign: true,
        precision: 2,
        decimal: '.',
        // blockSeparator: ' ', // String
        blockSeparator: [',', ' '], // Array
        // blockSize: 3, // String
        blockSize: [2, 3], // Array
        formatter: 'numeral'
      },
      maskCase4: '####', // Existing, custom
      maskCase5: phoneMask, // External lib
      input: null, // {String,Number}
      type: null, // typeof
      withMask: true // Toggle with/without mask
    }
  },

  computed: {
    getMask () {
      return this.withMask ? { mask: this.maskAuPhone } : {}
    },
    maskAuPhone () { // There are three common formats for AU phone numbers
      if (!this.input) return ''
      return this.input.length > 1 && this.input.startsWith('0')
        ? this.input.startsWith('04')
          ? '#### ### ###' // Mobile
          : '(##) #### ####' // With area code
        : '#### ####' // Local number
    }
  },

  mounted () {
    this.callback()
  },

  methods: {
    callback () { // Post-render action
      window.setTimeout(() => {
        this.type = typeof this.input
        // this.input = '12.g3' // External - attempt a correction
        this.withMask = false
      }, 10000)
    }
  }
}
</script>