How to use a date picker with a component?

Im need help to get a date picker working with my modal components. I have made the modal and that workers fine, I've also installed a date picker ('flatpickr') and that works fine when I call it on an element not within a component.

However when I try to use it on the modal nothing happens. Im unsure where I should be calling the date picker within the component as I thought you should refrain from putting anything with side effects as they won't me parsed.

my modal component.vue

<template>
<div class="cis-modal is-active">

    <div class="cis-modal-background">

        <div class="cis-modal-content animated bounceInUp">

            <div class="card">

                <div class="card-body">

                    <slot></slot>

                </div>
            </div>

        </div>

        <button class="cis-modal-close" @click="$emit('closed')"><i class="fa fa-times" aria-hidden="true"></i></button>


    </div>
</div>

<script>
export default {


}
</script>

flatpickr script

<script>
$("#talentDOB").flatpickr({
    enableTime: true,
    dateFormat: "F, d Y H:i"
});

modal being called

<modal v-if="showEditTalentModal" @closed="showEditTalentModal = false;">
{!! Form::model($talent, ['method' => 'PATCH', 'action' => ['TalentController@update', $talent->user_id], 'files'=>true ]) !!}

<div class="form-group">
    {!! Form::label('dob', 'Date of Birth:') !!}
    {!! Form::text('dob', null, [ 'data-input','class'=>'form-control', 'required' => 'required', 'id' => 'talentDOB']) !!}
</div>

<div class="form-group">
    {!! Form::submit('Update Profile', ['class'=>'btn btn-primary']) !!}
</div>


{!! Form::close() !!}


</modal>