Enable Flatpickr date picker within a template/component

Disclaimer: I'm a noob.

Im struggling to get my date picker to work on a form within a Vue modal template. The date picker works perfectly when its called from an input not within the template but doesn't work when inside the template. Im unsure what data I'm missing in the template.

app.js

    require('./bootstrap');

    window.Vue = require('vue');

    Vue.component('modal',{

        props:  'user_id',


        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>

        `


    });


    const app = new Vue({
        el: '#app',

        data: {

            showEditTalentModal : false,
            showEditTalentBioModal : false,
            showAddTalentExperience : false,
            showUpdateTalentExperience : false,
            showDeleteTalentExperience : false,
            showAddTalentEducation : false,
            showEditCompanyModal : false,
            showEditCompanyBioModal : false,
            showSupervisorEditInterns : false,
            showAddSupervisorModal : false,
            showAddCompanyInternshipModal : false,
            showUpdateTalentEducation : false,
            showSidebarNav : false,
            isHovered : false,



         },

        computed: {
            href () {
                return "/talent/experience/update/" + this.id;
            }
        },

        methods: {

            sidebarShow(){

                this.showSidebarNav = true

        },

        mouseOver(){
                this.isHovered = true
        }


     }
    });

my modal component

    <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>



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


        </modal>

script for Flatpickr

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

Im guessing I need to pass the template some mounted data or something similar I'm just unsure what. It doesn't work with the query-ui datapicker either.