jQuery-UI datepickerをvueで使う

onSelectでinputを発生させればv-modelで変数とバインディングできる。	

<div id="test">
<div><input type="text" ref="xxx" v-model="zzz" /> ← v-modelでバインディング → <input type="text" ref="yyy" v-model="zzz" /></div>
</div>

<script>
// 別ファイルなどで初期化
jQuery.datepicker.setDefaults({
	dateFormat: 'yy/mm/dd',
	onSelect: function(date, elm) {
		var evt_inp = document.createEvent('HTMLEvents');
		evt_inp.initEvent('input', true, false);
		this.dispatchEvent(evt_inp);
	}
});

// 本体
jQuery(function($) {
	var v = new Vue({
		el: '#test',
		data: {
			zzz: '2020/12/01'
		},
		mounted: function() {
			$(this.$refs.xxx).datepicker();
			$(this.$refs.yyy).datepicker();
		}
	})
});
</script>


#　demo
https://systemix.ne.jp/sample/datepicker-vue.html