test/index.html

<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
</head>

<body>
  <div id="app">
    <!-- <the-mask id="input" mask="+1 ##.##.###)" @input.native="updateCursor" @keyup.native="updateCursor"></the-mask> -->
    <input id="input" type="tel" v-mask="'+1 ##.##.###)'" @input="updateCursor" @keyup="updateCursor" />
    <!-- <input id="input3" @input="updateCursor2" @keypress="updateCursor2" @keydown="updateCursor2" @keyup="updateCursor2"> -->
    <input id="cursor" :value="cursor">
  </div>
  <script src="../node_modules/vue/dist/vue.js"></script>
  <!-- <script src="../dist/vue-the-mask.js"></script> -->
  <script src="../dist/VueTheMask.umd.js"></script>
  <script>
    new Vue({
      el: '#app',
      data: () => ({ cursor: 0 }),
      methods: {
        updateCursor($event) {
          this.cursor = $event.target.selectionEnd
        },
        updateCursor2($event) {
          this.cursor = $event.target.selectionEnd
        }
      }
    })
  </script>
</body>

</html>