Button that shows modal for each b-table row

The problem is that:

1. You're rendering a modal for each row of the table and;
2. Reading the docs, it seems like the modal is triggered by the id, and your b-modal id is not dynamic depending on the row.

How to fix it:

1. Use just one modal on the b-table level
2. Dynamically inject id into your modal_edit-subnet component:

<template>  <div>    <b-button size="sm" v-b-modal[id]>Edit</b-button>    <b-modal      :id="id"      ref="modal"      title="Edit subnet"            @ok="handleOk"    >        This is subnet {{data_subnet.id}}     </b-modal>  </div></template><script>export default {    props: {        id: {            type: String | Number        }    }}</script>

3. Use v-model (this is the way I would do it)

<template>  <div>    <b-button size="sm" @click="show = true">Edit</b-button>    <b-modal      v-model="show"      ref="modal"      title="Edit subnet"            @ok="handleOk"    >        This is subnet {{data_subnet.id}}     </b-modal>  </div></template><script>export default {    data() {        return {            show: false        }    }}</script>