title: Vue.js and vue-phone-number-input package component : set country code and phone number programmatically
body: <p>In my Laravel + Vue.js SPA (Single Page Application), I am using <a href="https://bootstrap-vue.js.org/" rel="nofollow noreferrer">BootstrapVue</a> , 
  <a href="https://github.com/LouisMazel/vue-phone-number-input" rel="nofollow noreferrer">vue-phone-number-input</a> package  and <a href="https://logaretm.github.io/vee-validate/" rel="nofollow noreferrer">VeeValidate</a>. Upon inputting the country code and phone number, I can retrieve them seperately in the <code>methods</code> part. </p>
  
  <p>The mobile (or phone) number input is inside a form. After validating the form, I save the data ( country code and phone number each, as <strong>the component has 2 parts: country code and phone number. See the image in the provided link of the package</strong>) in database table. When the form page loads, input fields should also have values fetched from the database.</p>
  
  <p>But I cannot find a way to set the value to the mobile (or phone) input field correctly.</p>
  
  <p>Let me paste the code here :</p>
  
  <pre><code>&lt;template&gt;
   &lt;ValidationObserver ref="form" v-slot="{ passes }"&gt;
  
          &lt;div id="registration_form"&gt;
  
              &lt;b-form @submit.prevent="passes(onSubmit)" @reset="resetForm"&gt;
  
                 &lt;ValidationProvider vid="mobile" rules="required" name="mobile" v-slot="{ valid, errors }"&gt;
  
                      &lt;b-form-group
                              label="Mobile:"
                              label-for="exampleInput1"
  
                      &gt;
  
                          &lt;vue-phone-number-input
  
                                  v-model="mobile"
                                  default-country-code="BD"
                                  required
                                  :state="errors[0] ? false : (valid ? true : null)"
                                  @update="updatePhoneNumber"
                                  placeholder="Enter Mobile Number"
                          /&gt;
  
  
  
                          &lt;b-form-invalid-feedback id="inputLiveFeedback"&gt;{{ errors[0] }}&lt;/b-form-invalid-feedback&gt;
  
                      &lt;/b-form-group&gt;
  
                  &lt;/ValidationProvider&gt;
  
                  &lt;b-button type="submit" variant="primary"&gt;Submit&lt;/b-button&gt;
                  &lt;b-button type="reset" variant="danger"&gt;Reset&lt;/b-button&gt;
              &lt;/b-form&gt;
  
          &lt;/div&gt;&lt;!-- end of id registration_form--&gt;
      &lt;/ValidationObserver&gt;
  &lt;/template&gt;
  </code></pre>
  
  <p>JS part has the following content. Somehow I manage to get the <code>user_profile</code> object variable to  contain the country code (<code>nationalNumber</code>) and phone number without country code (<code>phoneNumber</code>) from the database table.</p>
  
  <pre><code> import VuePhoneNumberInput from 'vue-phone-number-input';
   import 'vue-phone-number-input/dist/vue-phone-number-input.css';
  
      export default {
          name: "EditProfile",
          components: {
              ValidationObserver,
              ValidationProvider,
              VuePhoneNumberInput
          },
          data: () =&gt; ({
  
              mobile:user_profile.phoneNumber,
              national_number:user_profile.nationalNumber,
  
  
  
          }),
  
  
          methods: {
              updatePhoneNumber(data) {
                  this.mobile = data.phoneNumber;
                  this.national_number = data.nationalNumber;
  
              },
              onSubmit() {
                  console.log("Form submitted yay!");
  },
              resetForm() {
                  this.name = "";
                  this.email = "";
                  this.address="";
                  requestAnimationFrame(() =&gt; {
                      this.$refs.form.reset();
                  });
              }
          }
      };
  </code></pre>
  
  <p>So how can I set the country code and phone (or mobile) number to the <code>vue-phone-number-input</code> component programmatically ?</p>