How to pass a different value to props?

Question

Vue.js

There is a modal component in vuetify , on the page I call it using $refs on the @click event and already in the component I process it in the modal_open method. The task is to pass dynamic data (approx. material id) to the modal - preferably with the help of props! How to pass a different value to the idelement prop of the modal component
, then every time you call @click="$refs.modal_content.modal_open()" you need to
substitute the corresponding data-id value from the button in the :idelement="data-id" prop?

<v-modal-content ref="modal_content"  :idelement="11" >
          <template v-slot:title>Lorem ipsum dolor sit amet</template>
          <template v-slot:content>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero reiciendis vitae maiores obcaecati blanditiis sunt voluptatem voluptas qui aspernatur sit, dolores, autem pariatur asperiores, quisquam delectus voluptates nobis mollitia a!
          </template>
</v-modal-content>

<a href="javascript:void(0);" data-id="12345" @click="$refs.modal_content.modal_open()"  class="d-flex align-items-center">
              some btn
              </a>

Otherwise, you will have to pass $event and get values ​​​​by getAttribute People, sorry if that, if the question is incorrect!
@click="$refs.modal_content.modal_open($event)

Answer 1

I could tell you how to do it, but the fact is, you don't have to do it.
For each complex manipulation with elements/components, you must create your own component/mixin that encapsulates this little piece of functionality.
1. The ~data-modal component, which exports the modal_open method inside which calls the modal_open of the wrapped v-modal-content, at the same time putting down the idelement.
2. The ~data-modal-control component, which accepts idelement and modal props and performs all the machinations inside.
3. Perhaps it should be combined into one component if the opening button always corresponds to the modal.