TabIndex vue emit change tab value from another component

Question

I need to emit tabIndex value from another component after successfully submitting a form so it can go back to the first index, how can I achieve this?

This is my component:

<template>
  <b-tabs pills card v-model="tabIndex">
    <b-tab title="My Stocks">
      <b-container fluid="lg">
        <div>
          Batches (age shown in weeks)
          <br />
          <b-table small responsive :items="batches" :fields="fields"></b-table>
        </div>
        <div v-if="this.isData">
          <b-row>
            <b-col>
              <pie-chart
                :chartData="chartData"
                :options="chartData.options"
              ></pie-chart>
            </b-col>
          </b-row>
          <b-row>
            <b-col> <b>Total Stock:</b>{{ farmStock }}{{ measurement }} </b-col>
          </b-row>
        </div>
        <div v-else>
          <b-row class="justify-content-md-center">
            <b-col>
              <h6>you have no stocks</h6>
            </b-col>
          </b-row>
        </div>
      </b-container>
    </b-tab>
    <b-tab title="Batches">
      <BatchMain></BatchMain>
    </b-tab>
  </b-tabs>
</template>
<script>
import farmStockService from "@/service/FarmStockService";
import PieChart from "@/components/charts/PieChart.js";
import BatchMain from "@/components/stock/AddBatchMain";

export default {
  components: {
    PieChart,
    BatchMain,
  },

  data() {
    return {
      backgroundColor: [],
      chartData: {},
      measurement: "",
      farmStock: 0,
      gradeStock: [],
      isData: false,
      batches: [],
      fields: ["name", "age", "quantity", "shellfish", "stock_type"],
      tabIndex: 0,
    };
  },

It has tabs with v-model index, now in the same directory or folder I have another component that is imported into the one above called BatchMain which is in the second tab This component has a submit function:

async onSubmit(evt) {
      evt.preventDefault();
      if (!this.validateForm()) return;

      try {
        let data = {
          name: this.form.name,
          description: this.form.description,
          shellfish: this.form.shellfish,
          stockType: this.form.stockType,
          gradeList: this.form.gradeList,
          age: this.form.age,
          quantity: this.form.quantity,
          source: this.form.source,
          hatchery: this.form.hatchery,
          location: this.form.location,
        };
        let response = await batchService.addBatch(data);

        if (response.status === 200) {
          makeToast.call(
            this,
            "Success",
            "Batch is created successfully",
            "success"
          );

          setTimeout(() => {
            this.$router.replace({ name: "StockMain" });
          }, 1000);
        }
      } catch (e) {
        console.log("e", e);
        makeToast.call(this, "Error", "Error creating batch", "danger");
      }
    },

what can I add to the second component to emit the tab index back to 0 or simply route back to the first index? Thanks so much, two of them are vue components I need to emit some sort of data from the second to the first so it changes the v-model to 0 again as the tabs will keep the tab index when I have v-model in place, I'm just not sure how to pass data between components like this, I need it at the end of the submit method

Answer 1

Just emit an event inside function onSubmit:

this.$emit("submitted");

and then handle it in your parent component:

<BatchMain @submitted="tabIndex = 0" />