How to remove Id using put method - vue.js

Question

Indexing.vue;
<template>
<div class="row">
<div class="col-md-12">
<card class="card-plain" card-body-classes="table-full-width" header-classes="row">
<template slot="header" :class="row">
<h3 class="card-title">Indexing</h3>
<base-button type="primary" size="sm" #click="addNewIndexing" class="ml-4">Add Indexing</base-button>
</template>
<div class="row indexing-cards-container pl-5">
<div class="col card " v-for="data in indexingList" :key="data.id">
<div class="row">
<p class="pl-4">{{data.indexing_name}}</p>
</div>
<div class="row">
<p class="pl-4">{{data.indexing_url}}</p>
</div>
<div class="row IndexingImage pb-2 ">
<img :src="data.indexing_image_url" class="rounded mx-auto d-block"/>
</div>
<div class="row">
<div class="col pl-4">
<base-switch
class="mt-2"
v-model="data.is_active"
type="primary"
on-text="Active"
off-text="Inactive"
></base-switch>
</div>
<div class="col">
<base-button type="primary" #click="deleteIndexing(data.id)">Delete</base button>
</div>
</div>
</div>
</div>
</card>
<!-- </div>
</div>
</card> -->
</div>
</div>
</template>
<script>
import { Table, TableColumn } from 'element-ui';
import { BaseSwitch } from 'src/components/index';
export default {
components: {
[Table.name]: Table,
[TableColumn.name]: TableColumn,
BaseSwitch
},
data() {
return {
indexingList: [],
};
},
methods: {
addNewIndexing() {
this.$router.push({path: 'addindexing'})
},
deleteIndexing: function() {
this.api.putData('indexing/'+store.state.journalId, ).then((res)=> {
console.log(res.data)
})
},
getIndexingList: function() {
this.api.getDataModule('indexing/'+store.state.journalId, 'journals/v1/').then((res) => {
console.log(res.data)
this.indexingList = res.data.indexingList
}, (err) => {
console.log(err)
})
},
},
mounted: function() {
this.getIndexingList()
}
};
api.js;
putData (action, data) {
let url = `${BASE_URL}`
url += action + '.json'
return instance.put(url, data)
},
Issue :
We have separately created one component called (AddIndexing.vue) to get user details like indexing_name, indexing_url and indexing_image_url. And we wrote post method to post those user datas to the server. That is working fine. In this component (Indexing.vue) I'm showing those received datas from the server, that is also working fine.
I want to implement the delete function in the deleteIndexing method. We wrote the complete API code in api.js file. But I have mentioned only putData function because my boss told me to implement the delete option by putData api function. So now for action parameter in the putData function I passed "indexing/'+store.state.journalId" as an argument through deleteIndexing function and for data parameter in the putData function
I don't know what to pass as an argument. My boss told me to create a temporary object in the name of indexing_id and he asked me to pass as an second argument because indexing_id is the name of the id for each index in the database. But I don't know how to implement exactly. If I click delete option then that button should delete one index data based on the ID.
This is what I need to do. I can post the data and I can get the data but I don't know how to delete. After filling all the fields user entered the submit option means that data will send to the server, and it will create a new index module to have that data for single customer. If we are filling two customer details it means it will create two indexes separately and those two customer details will show in the "indexing.vue" component.
So now by using delete option I want to delete any user details by the ID.' API code everything was working fine but I don't know how to implement. The I do have one toggle button for active state and inactive state for that also I have to write a code by using putData api function.
How to implement this so I can do based on that.
I want to know how to do active and inactive toggle button function also. I tried some ways but that doesn't work for me. I'm quite beginner here so that I'm struggling a lot to do these API's.