How to attach a datepicker widget to an element when adding a new line?

Question

Vue.js

Vue.js adds a new line using the adduser method, so the .datepicker element does not have a calendar in the new line. How to add it?

<div id="app3" class="ui segment">
 <div v-for="(user, index) in users">
      	<div class="ui grid object_target">
      		   	<div class="two wide column field">
      				<input type="text" class="datepicker" />
      			</div>
                         </div>
      </div>
</div>

new Vue({
  el: '#app3',
  data: {
  	
    users: [{ name: '',procent:'' }],
  
     
  },
  methods: {
      addUser(index) {
      
      	var vm = this
      	//dogovor model
    	//const attrValue = this.$refs.div.getAttribute('data-bullshit-attribute');
    	//dop file last
      //const attrValue2 = this.$refs.div2.getAttribute('data-lastnum-attribute');
      //	console.log(attrValue2)
      	length=this.users.length
      	//length2=length+parseInt(attrValue2);
  
      	this.users.push({
       	 	name: '',
        	procent: length+1,
    	});
    },
    deleteUser: function (index) {
      console.log(index);
      console.log(this.finds);
      this.users.splice(index, 1);
      if(index===0)
      this.addUser()
    },
   
   
   
  
  },
 
 	 mounted: function () {
 	 	//const attrValue = this.$refs.div.getAttribute('data-bullshit-attribute');
  		//const attrValue2 = this.$refs.div2.getAttribute('data-lastnum-attribute');
  		//lastnum=parseInt(attrValue2);
  	
  		
    //lastnum+=1
    
    
    
  		this.users[0].procent = 1;
  		
  		
  }
});

<!--calendar-->
 $( function() {
    $( ".datepicker" ).datepicker();
  } );

Answer 1

The correct option is to abandon the use of jquery, and take some ready-made component for vue. You can check out awesome-vue for a list , maybe you can look at something.
Well, everything is so trivial : you hang ref on elements that should be datepickers; hang an observer on an array with data, in which you bypass the elements and initialize the widget where it does not exist:
<input ref="datepicker" v-model="item.date">

watch: {
  items() {
    this.$nextTick(() => {
      this.$refs.datepicker
        .filter(n => !n.classList.contains('hasDatepicker'))
        .forEach(n => $(n).datepicker({
          onSelect: () => n.dispatchEvent(new Event('input')),
        }));
    });
  },
},

Or you can make a directive :
<input v-datepicker v-model="item.date">

Vue.directive('datepicker', {
  inserted: el => $(el).datepicker({
    onSelect: () => el.dispatchEvent(new Event('input')),
  }),
});

Or even an entire component :
<v-datepicker v-model="item.date"></v-datepicker>

Vue.component('v-datepicker', {
  template: `<input :value="value" readonly="readonly">`,
  props: [ 'value' ],
  mounted() {
    $(this.$el).datepicker({
      onSelect: date => this.$emit('input', date),
    });
  },
});

By the way, you will also need to add key to the list of users in the template.