How to bulk initialize dropdown in vue?

Question

Vue.js

Hello.
vue + materializecss. I display blocks with dropdown in a loop.

<a class=""  href="#" :ref="'dropdown' + post.index" v-bind:data-target="'dropdown' + post.index" > <i class="material-icons">visibility</i></a>
    <ul v-bind:id="'dropdown' + post.index"  class="dropdown-content">
        <li>...</li>
    </ul>

You need to initialize them all

mounted() {
   M.Dropdown.init( this.$refs.dropdow?, {
    hover: true
  })
 },

How to do?

Answer 1

Stupid variant: as in a cycle deduce, so in a cycle initialize (at v-forin this.$refs.dropdowthe array lies).
The correct option is to make a separate component m-dropdown, which inside carries out all the necessary initialization and arranges the necessary layout, and then connect this particular component in a loop.
Ideal option: use libs written in vue in order to avoid unnecessary overhead.

Answer 2

I think there is another option to use directives