如何在动态添加的元素上应用jquery插件

Question

我下面有一个vuejs2 foreach循环：

<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"']) !!} 

当我将新项目添加到tracker.items时，我想在新添加的字段上应用$(".duration_field").inputmask();。但是，如果我要在添加新行时重新应用“ inputmask”，则不会应用inputmask：

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


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

如何解决这个问题？