How can use accessibility on vuejs-datepicker using tab key - vue.js

Question

I am using vuejs-datepicker in my application inside a form. https://www.npmjs.com/package/vuejs-datepicker
My form structure looks something like this
<form #submit.prevent="submitForm">
<div v-show="claimRelatedTo === 'Sales Team'" class="form-group">
<label for="incentiveTypeSelect" class="col-form-label required">Incentive Type</label>
<div class="imported input-styling width75" id="incentiveTypeSelect">
<multi-select
v-model="newClaimForm"
placeholder="Select Incentive Type"
:options="list"
:multiple="false"
>
<span slot="noResult">No results found</span>
</multi-select>
</div>
</div>
<div class="form-group width75">
<label for="clientSelect" class="col-form-label required">Client</label>
<div class="imported input-styling width75" id="clientSelect">
<multi-select
#select="change"
#remove="deselect"
v-model="selectedClient"
placeholder="Select client"
:options="allClients"
>
<span slot="noResult">No results found</span>
</multi-select>
</div>
<p class="error" v-if="newClaimFormError.clientId">
This field is required
</p>
</div>
<div v-if="newClaimForm.selectedContract !== ''" class="form-group mt-4 width-50 position-relative">
<label for class="col-form-label required">Effective Date</label>
<i class="icon-calendar3 calender-icon" />
<date-picker
id="date"
placeholder="Select Effective Date"
wrapper-class="width75"
input-class="date-picker__input"
:value="effectiveDate"
#selected="formatDate"
#input="changeDateFormat"
v-model="effectiveDate"
ref="datepicker"
>
</date-picker>
<p
class="error"
v-if="newClaimFormError.effectiveDate"
>This field is required</p>
</div>
</div>
<div v-show="claimRelatedTo === 'Sales Team'" class="form-group">
<label for="saleTeamLeaderSelect" class="col-form-label required">Sales Team Leader</label>
<div class="imported input-styling width75" id="saleTeamLeaderSelect">
<multi-select
v-model="newClaimForm.selectedLeader"
placeholder="Select sales team leader"
:options="teamLeaderList"
:multiple="false"
:show-labels="false"
/>
</div>
</div>
</div>
</form>
I need the functionality like when I use tab keys to navigate over the datepicker field the calendar popup should open like it works on click of field. And when the popup opens I should be able to access the calendar dates years with tab key also.
Is there any way to do it?