<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="container">
    <input
       type="text"
       class="credit-card"
       maxlength="19"
       pattern="[0-9]*"
       inputmode="numeric"
       v-model="creditCardNumber"
     />
  </div>
</template>

<script>
export default {
  data() {
    return {
      creditCardNumber: ''
    }
  },
  watch: {
    creditCardNumber() {
      // Card number without dash (-)
        let realNumber = this.creditCardNumber.replace(/-/gi, '')
        
        // Generate dashed number
        let dashedNumber = realNumber.match(/.{1,4}/g)

        // Replace the dashed number with the real one
        this.creditCardNumber = dashedNumber.join('-')
    }
  }
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style lang="scss">
  #container {
    padding: 20px;
    
    input.credit-card {
      width: 400px;
    }
  }
</style>