I'd like v-model to always use the nationalNumber key

[sts-ryan-holton]

I've just started using this library, I'm storing 3 fields in my Laravel database:

1. country_code
2. country_calling_code
3. phone_number

My Vue component is currently:

<vue-phone-number-input
  valid-color="#28a745"
  error-color="#e0465e"
  size="lg"
  :default-country-code="notifications.country_code"
  :preferred-countries="['GB', 'US']"
  :border-radius="0"
  v-model="notifications.phone_number"
  @update="mobileNumberPayload" />

My JS is:

/*
** Mobile number payload
*/
mobileNumberPayload (payload) {
  if (payload && payload.countryCode) {
    this.notifications.country_code = payload.countryCode
  }
  if (payload && payload.countryCallingCode) {
    this.notifications.country_calling_code = payload.countryCallingCode
  }
  if (payload && payload.nationalNumber) {
    this.notifications.phone_number = payload.nationalNumber
  }
},

Now, it looks like I only have access to the nationalNumber key in the payload of the update event, which is fine, but the issue I have currently is if I type in a UK based mobile number, starting with 07 with spaces etc, then for some reason despite the nationalNumber being in the international format I still continue to see the "friendly" formatted number in my v-model which isn't what I want as this is then what's saved to my phone_number field.

How can I make the component always use the nationalNumber for the v-model?