Code on using jquery datepicker with VUE.js

simpleform.html

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<!-- BEGIN jquery-ui library -->
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- END jquery-ui library -->

<!-- Special version of Bootstrap that only affects content wrapped in .bootstrap-iso -->
<link rel="stylesheet" href="https://formden.com/static/cdn/bootstrap-iso.css" /> 

<!-- Inline CSS based on choices in "Settings" tab -->
<style>.bootstrap-iso .formden_header h2, .bootstrap-iso .formden_header p, .bootstrap-iso form{font-family: Arial, Helvetica, sans-serif; color: #54787c}.bootstrap-iso form button, .bootstrap-iso form button:hover{color: #ffffff !important;}.bootstrap-iso .form-control:focus { border-color: #e9666c;  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(233, 102, 108, 0.6); box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(233, 102, 108, 0.6);} .asteriskField{color: red;}.bootstrap-iso form .input-group-addon {color:#555555; background-color: #f7efef; border-radius: 4px; padding-left:12px}</style>

<!-- HTML Form (wrapped in a .bootstrap-iso div) -->
<div id="app">


<div class="bootstrap-iso">
 <div class="container-fluid">
  <div class="row">
   <div class="col-md-6 col-sm-6 col-xs-12">
     <div class="form-group ">
      <label class="control-label " for="name">
       Your Name
      </label>
      <input class="form-control" id="name" name="name" type="text" v-model="name" />
      {{name}}
     </div>
     <div class="form-group ">
            <label class="control-label " for="date">
             Date of Birth
            </label>
            <input class="form-control" id="dob" name="date" placeholder="MM/DD/YYYY" type="text" v-model="dob" />
            {{dob}}
           </div>     
     <div class="form-group ">
      <label class="control-label " for="phone">
       Office Phone
      </label>
      <input class="form-control" id="phone" name="phone" type="text" v-model="phone" />
      {{phone}}
     </div>
     <div class="form-group">
      <div>
       <button class="btn btn-primary btn-sm" name="submit" type="submit">
        Submit
       </button>
      </div>
     </div>
   </div>
  </div>
 </div>
</div>


</div>

<script type="text/javascript" src="/sites/demos/mdemos/webpart/simpleForm/simpleform.js"></script>

simpleform.js

new Vue({
    el:"#app",
    data: {
        name:'',
        phone:'',
        dob:''
    },
    methods: {
        setDobValue(value){
            this.dob = value;
        }
    },
    mounted(){
        $("#dob").datepicker({
            onSelect: this.setDobValue
        })
    }
})

$( function() {
    $( "#dob" ).datepicker();
} );