jQuery UI datepickerをvueで使う - 2

// jqueryにfireEventメソッドを追加しておく
if (jQuery) {
	(function($) {
		$.fn.fireEvent = function(name, options) {
			// オプション
			var evt = null,
				opts = $.extend({
					bubles: true,
					cancelable: false,
					data: null
				}, options);

			if (opts.data != null) {
				evt = document.createEvent('CustomEvent');
				evt.initCustomEvent(name, opts.bubles, opts.cancelable, opts.data);
			} else {
				evt = document.createEvent('HTMLEvents');
				evt.initEvent(name, opts.bubles, opts.cancelable);
			}

			$(this).each(function(idx, tgt) {
				if (tgt.dispatchEvent) {
					tgt.dispatchEvent(evt);
				} else {
					console.error('cannot dispatch event ' + name + '. ignore.');
				}
			});

			return this;
		};
	})(jQuery);
}

// 日付選択時にinputとchangeを発生させる
// 対象エレメントは仮に.dpとしておく
$('.dp').datepicker({
	onSelect: function(date, elm) { $(this).fireEvent('input').fireEvent('change', { data: date }); }
});


// v-ifなどで消えてしまうエレメントならば、focus時にdatepicker初期化済みか確認（hasDatepicker classの有無を見る）してなければ初期化
$(document).on('focus', '.dp', function(evt) {
	if (!$(this).hasClass('hasDatepicker')) {
		$(this).datepicker({
			onSelect: function(date, elm) {
				$(this).fireEvent('input').fireEvent('change', { data: date });
			}
		});
	}
});