howto apply jquery plugins on dynamically added elements

Question

I have a vuejs2 foreach loop below:

<div class="row" v-for="(item, key) in tracker.items">
                        <div class="col-md-5">
                            <div class="form-group"> 
                                {!! Form::select('tool_id[]', [], null, ['class' => 'form-control tool_list', 'v-model' => 'item.tool_id']) !!}
                            </div>
                        </div>

                        <div class="col-md-5">
                            <div class="form-group"> 
                                {!! Form::text('duration[]', null, [
                                    'class' => 'form-control duration_field', 
                                    'data-inputmask'=>"'alias':'hh:mm'", 

                                    'v-model' => 'item.duration'
                                ]) !!}
                            </div> 
                        </div>
                        <div class="col-md-1">
                            <span>&nbsp;</span>
                            <a class="button-delete" title="Delete" v-on:click="deleteItem(key)"></a>
                        </div>
                    </div>
{!! Form::button(trans('common.add_row'),['class'=>'btn btn-primary', 'v-on:click="addItem"']) !!} 

When I add a new item to the tracker.items i want to apply $(".duration_field").inputmask(); on the newly added field. However, if i am to reapply `inputmask' when adding the new row the inputmask is not being applied:

addItem: function() {
            this.tracker.items.push({
                "tool_id": '',
                "duration": '',
            });


            $(".duration_field").inputmask();
}

How can I get around this issue?