How to correctly include a third-party library in a vuejs component for dynamically appearing elements?

Question

Vue.js

I have a table (vuejs component) that has only one row when the page loads. The table also has a button to add a new row.

The last column of the table is input, which uses the dropify library.
The task is to connect dropify to dynamically created inputs in each new line.
Dropify initialization is elementary. You need to get the input element by the selector and apply the dropify() method from the library of the same name with your necessary settings to it.
My solution was to initialize dropify for inputs with the same class in 2 lifecycle hooks - updated and mounted:

updated: function(){
      this.dropifyInit()
    },

mounted: function () {
      this.dropifyInit()
    },

Those. it turns out that for the first line I initialize dropify in the mounted hook, and for all lines added in the future I do this in the updated hook.
I solved the problem, but there is a strong inner conviction that my method is too cumbersome and not very correct.

Answer 1

Make a separate component that will represent your dropify input. In mounted, initialize dropify. And use this component in your table instead of the usual input.