JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.0/vue.js"></script>
<div id="content">
  <script type="text/x-template" id="phone">
    <input type="text" class="phone" v-model="internalValue" v-on:input="updateValue($event.target.value)" />
  </script>
  
  <label>Vue Phone</label>
  <phone v-model="myphone"></phone>
  <br />
  {{ myphone }}
  <br />
  
  <label>Simple Phone</label>
  <input type="text" class="phonex" />
</div>

JavaScript

Vue.component('phone', {
  template: '#phone',
  props: {
    value : {
      type   : String,
      default: ''
    },
    mask: {
      type   : String,
      default: '(999) 999-9999'
    }
  },
  data: function() {
  	return {
    	internalValue: ''
    };
  },

	created: function() {
  	this.internalValue = $.trim(this.value);
  },

  mounted: function() {
    $(this.$el).mask('(999) 999-9999');
  },

  methods: {
    updateValue: function (value) {
			this.$emit('input', value);
    }
  }
});

var vueapp = new Vue({
  el: '#content',
  data: {
    myphone: ''
  }
});

$('.phonex').mask('(999) 999-9999');