[Vuejs]-Vue: bind click event to one component, send value to another

Your code looks like you are aiming to show several modals at the same time. That’s usually not what you want.

In such cases I usually do something like this:

export default {
  name: "app",
  data () {
    return {
      modal_open: false,
      modal_deputy: null,
  }
}

In methods:

open_modal(deputy) {
  this.modal_open = true;
  this.modal_deputy = deputy
}

The modal called:

<deputy
  class="deputy"
  v-for="deputy in deputates_in_regions(region)"
  :key="deputy.id"
  :deputy="deputy"
  @click="open_modal(debuty)"
></deputy>

<modal
  class="modal"
  :key="deputy.id"
  :deputy="modal_deputy"
  v-if="modal_open"
></modal>

The modal itself doesn’t need to handle being shown at all, the parent can handle that with the v-if.

<template>
    <div class="modal">
        <p>{{ deputy.whateverYouWantToShow }}</p>
    </div>
</template>

See working code sandbox: https://codesandbox.io/s/2019-11-11deputates-z125f?from-embed

Note the .native modifier on the @click-handler & the :key=”modal_deputy.id” instead of :key=”deputy.id”.