JSFiddle - React, Tailwind, and code Playground

HTML

<div id="app">
  <div id="demo">
    <int-tel-input
      :phone="user.phone"
      :country-abbr="user.countryAbbr"
      v-on:country-change="countryCodeChange"
      @phone-change="phoneNumberChange"
    ></int-tel-input>
    <p><span v-text="`phone number: ${user.phone}`"></span></p>
    <p><span v-text="`country abbr: ${user.countryAbbr}`"></span></p>
    <p><span v-text="`country code: ${user.countryCode}`"></span></p>
  </div>
</div>

CSS

#demo {
    width: 400px;
    margin: auto;
    font-family: "Avenir Next", Avenir, "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Source Han Sans SC", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
}
    
#demo > p {
  margin-top: 20px
}

JavaScript

new Vue({
  el: '#app',
  
  components: {
    IntTelInput: IntTelInput.default
  },
  
  data: {
    user: {
      phone: '',
      countryAbbr: 'af',
      countryCode: ''
    }
  },
  
  mounted () {
  },
  
  methods: {
    countryCodeChange (country) {
      console.log(country)
      this.user.countryAbbr = country.addr
      this.user.countryCode = country.code
    },
    phoneNumberChange (phone) {
      this.user.phone = phone
    }
  }
})