Custom datepicker component in filter bar.

Hi there,

I'm using data grid and query builder together. I've been able to implement a custom datepicker component in query builder (based on my project needs).
Then I tried to implement my custom datepicker component in the filter bar. I've read the documentation and used filter bar template to show my custom datepicker component and it shows ok. My problem is when I select a date, It keeps reopening, I suspect my custom component keeps triggring over and over. 
Could you please kindly review my code and help me with my problem?
I've called my custom component "filterBarJalaliDt" on line 165.
In case you want to install my custom datepicker, please use this command: "npm install vue-persian-datetime-picker --save".

Best Regards
Masoud
Attachment: app_6732479d.zip

<template>      <div id="app">          <ejs-grid id="Grid":toolbar="toolbar" :dataSource="data" :allowPaging="true" :editSettings="editSettings" :allowFiltering="true" ref="grid">              <e-columns>                  ...                 <e-column field="OrderDate" headerText="Order Date" textAlign="Right" format="yMd" type="date" width="120" :filterBarTemplate="templateOptions"></e-column>                  ...             </e-columns>          </ejs-grid>      </div>  </template>    <script>  ...  export default {    name: "App",    data() {      ...       templateOptions: {          create: args => {            ...         },          write: args => {            var componentObj = Vue.extend(filterBarJalaliDt);            new componentObj({              el: "#" + args.element.id,              template: `<filterBarJalaliDt id=` + args.element.id + ` />`            }).$mount();          }        }      };    },    ...  };    var filterBarJalaliDt = Vue.component("filterBarJalaliDt", {    template: `    <div>      <date-picker @open="onOpen" @close="onClose" v-model="date"></date-picker>    </div>`,    data() {      ...   methods: {      onOpen(picker) {        console.log("The datepicker is open");      },      onClose(picker) {        console.log("The datepicker was closed");        var grid = document.getElementsByClassName('e-grid')[0].ej2_instances[0];        grid.filterByColumn("OrderDate","equal", new Date(picker.value))       var wrapper = document.querySelector('.vpd-wrapper.vpd-dir-rtl');        if(wrapper.closest('.e-gridheader')) {          wrapper.remove();    //removing the datepicker          document.querySelector('body').appendChild(wrapper);        }      }    }  });  </script>    ...

Hi Seeni,