So the problem is that I am working in a Laravel Vue application both are different application. The problem I am facing is that I have a created a component for modal using bootstrap in VUE JS.
And I am using that modal to 2 different components that is creating a data and for editing that data. So I created 2 different components that is for createdata and editdata and called the modal component in both of these. And these 2 component is called in another component that is viewAllData. Createdata components works fine but when rendering Editdata component it renders the CreateData component fields, I dont know why. How can I do this other way.

Below is the code that I using

For Modal:

<template>
  <button
    type="button"
    :class="btnClass"
    data-bs-toggle="modal"
    data-bs-target="#staticBackdrop"
  >
    <slot name="btn-title"></slot>
  </button>

  <div
    class="modal fade"
    id="staticBackdrop"
    data-bs-backdrop="static"
    data-bs-keyboard="false"
    tabindex="-1"
    aria-labelledby="staticBackdropLabel"
    aria-hidden="true"
    ref="theModal"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h1 class="modal-title fs-5" id="staticBackdropLabel">
            <slot name="dialog-header"></slot>
          </h1>
          <button
            type="button"
            class="btn-close"
            data-bs-dismiss="modal"
            aria-label="Close"
          ></button>
        </div>
        <div class="modal-body">
          <slot></slot>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn-secondary"
            data-bs-dismiss="modal"
          >
            Close
          </button>
          <button type="button" class="btn btn-primary" @click="success()">
            Ok
          </button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Modal } from "bootstrap";
export default {
  props: ["btnClass"],
  emits: ["on-success"],
  data() {
    return {
      theModal: null,
    };
  },
  methods: {
    success() {
      this.$emit("on-success", this.theModal);
    },
  },
  mounted() {
    this.theModal = new Modal(this.$refs.theModal);
  },
};
</script>

Below is the createdata component

<template>
  <backdrop-dialog-close-success
    btnClass="btn btn-success"
    @onSuccess="onSuccess"
  >
    <template #btn-title>Add New</template>
    <template #dialog-header>Add New Company</template>
    <template #default>
      <form>
        <div class="mb-3">
          <label for="companyName" class="form-label">Company Name</label
          ><asterisk-symbol />
          <input
            type="text"
            class="form-control"
            id="companyName"
            aria-describedby="emailHelp"
            v-model="companyName"
          />
        </div>
      </form>
    </template>
  </backdrop-dialog-close-success>
</template>
<script>
import BackdropDialogCloseSuccess from "../UI/BackdropDialogCloseSuccess.vue";
import AsteriskSymbol from "../misc/AsteriskSymbol.vue";
export default {
  components: {
    BackdropDialogCloseSuccess,
    AsteriskSymbol,
  },
  emits: ["on-success"],
  data() {
    return {
      companyName: "",
    };
  },
  methods: {
    onSuccess(modalInstance) {
      const formBody = { company_name: this.companyName };
      this.axios
        .post(
          this.$Constants.BaseUrl + this.$Constants.ApiEndpoints.AC_COMPANY,
          formBody
        )
        .then((res) => {
          if (res.status === 200) {
            console.log(res);
            this.$Methods.toastSuccess(res.data.message);
            modalInstance.hide();
            this.$emit("on-success");
          }
        })
        .catch((err) => {
          this.$Methods.toastError(err.response.data.message);
        });
      modalInstance.hide();
    },
  },
};
</script>

Below is the Editdata component

<template>
  <BackdropDialogCloseSuccess btnClass="btn btn-outline-warning">
      <template #btn-title>Edit</template>
      <template #dialog-header>Edit Company</template>
    <template #default>Tests</template>
  </BackdropDialogCloseSuccess>
</template>
<script>
import BackdropDialogCloseSuccess from "../UI/BackdropDialogCloseSuccess.vue";
export default {
  components: { BackdropDialogCloseSuccess },
};
</script>

Below is viewalldata component

<template>
  <TableView>
    <template #card-header>
      <h3 class="card-title">All Air-Conditioners</h3>
      <div class="row">
        <div class="ml-auto col-2">
          <add-new-company @on-success="fetchCompanyData"></add-new-company>
        </div>
      </div>
    </template>
    <template #table-header>
      <th>Sr No.</th>
      <th>Compnay Name</th>
      <th>AC Count</th>
      <th>Actions</th>
    </template>
    <template #default>
      <tr v-for="(company, index) in companyDetails" :key="company.company_id">
        <td>{{ index + 1 }}</td>
        <td>{{ company.company_name }}</td>
        <td>{{ company.ac_count }}</td>
        <td>
          <EditCompany></EditCompany>
          <!-- <span @click="editHandler(company.company_id)" class="show-pointer">
            <i
              class="fas fa-edit p-2"
              style="color: rgb(255, 153, 0); font-size: 22px"
            ></i>
          </span> -->
          <span @click="deleteHandler(company.company_id)" class="show-pointer">
            <i class="fas fa-trash p-2" style="color: red; font-size: 22px"></i>
          </span>
        </td>
      </tr>
    </template>
  </TableView>
  <!-- Button trigger modal -->
</template>
<script>
import TableView from "../UI/TableView.vue";
import AddNewCompany from "./AddNewCompany.vue";
import EditCompany from "./EditCompany.vue";
export default {
  components: { TableView,AddNewCompany, EditCompany},
  data() {
    return {
      companyDetails: [],
    };
  },
  methods: {
    fetchCompanyData() {
      this.axios
        .get(this.$Constants.BaseUrl + this.$Constants.ApiEndpoints.AC_COMPANY)
        .then((res) => {
          if (res.status === 200) {
            this.companyDetails = res.data.data;
          }
        })
        .catch((err) => {
          this.$Methods.toastError(err.response.data.message);
        });
    },
    editHandler(id){
      console.log(id);
    },
    deleteHandler(){

    }
  },
  mounted() {
    this.fetchCompanyData();
  },
};
</script>

when clicking on “add new” button

This works fine

But when clicking on “edit” button”

This renders add data fields why I dont understand, And how to render different data

I want to render different data to that modal in similar way