<!-- Use preprocessors via the lang attribute! e.g. <template lang="pug"> -->
<template>
  <div id="app">
   <input 
          type="text" 
          name="phone"  
          ref="phone" 
          v-imask="mask" 
          v-model="phoneValue" 
          @accept="onAccept"
          @complete="onComplete"
>

    <div>input val: {{ phoneValue }}</div>
    <div>unmasked val accept: {{ byRefAccept.unmaskedValue }}</div>
    <div>masked val accept: {{ byRefAccept.value }}</div>
    <div>ummasked val complete: {{ byRefComplete.unmaskedValue }}</div>
    <div>masked val complete: {{ byRefComplete.value }}</div>
  </div>
</template>

<script>
 
import {IMaskDirective} from 'https://cdn.skypack.dev/vue-imask@6.0.7';

export default {
  data() {
    return {
      phoneValue: 'init',
      byRefAccept: 'init',
      byRefComplete: 'init',
      mask: {
        mask: '+{7}(000)000-00-00',
        lazy: true,  // make placeholder always visible
      }
    };
  },  
  methods: {
    onAccept (e) {
          this.byRefAccept = e.detail;
                         },
        onComplete (e) {
          this.byRefComplete = e.detail;
        }
  },  
  directives: {
      imask: IMaskDirective
    }
};
</script>

<!-- Use preprocessors via the lang attribute! e.g. <style lang="scss"> -->
<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

a,
button {
  color: #4fc08d;
}

button {
  background: none;
  border: solid 1px;
  border-radius: 2em;
  font: inherit;
  padding: 0.75em 2em;
}
</style>