How to Save data in the different tables in the App Shopware 6 - shopware

Question

In Shopware App, I added a new tab in the category section.
I defined a few fields in there,
when I want to save data in custom fields in the category table, it works well. I use Subscribe for that.
But somewhere, I need to save data in a different table, .for example, the system_config table.
I need to know how to save data if the user clicks "save" at the header bar.
<template>
<div class="sas-category">
<sw-text-field
v-model="facebookTitle"
:label="$t('sasCategory.facebook.title.label')"
/>
</div>
<script>
export default {
data() {
return {
facebookTitle: null,
}
},
mounted() {
this.createdComponent()
},
updated() {
this.saveSystemConfigData()
},
methods: {
async createdComponent() {
this.category = await data.get({
id: 'sw-category-detail__category',
})
await this.getDataConfig()
},
/*
Get data from the system_config table
*/
async getDataConfig() {
let { data } = await systemConfigService.getConfigs()
let socialConfig = null
data = data.filter((item) =>
[CONFIGS.APP_SEO_SOCIAL + '_' + this.category.id].includes(
item.key
)
)
const socialConfigKey = [
CONFIGS.SOCIAL_FACEBOOK_TITLE,
]
if (data) {
socialConfig = data[0].value.filter(
(item) => !socialConfigKey.includes(item)
)
}
if (socialConfig) {
socialConfig.map((value) => {
switch (value.key) {
case CONFIGS.SOCIAL_FACEBOOK_TITLE:
this.facebookTitle = value.value
break
}
})
}
},
/*
For display data that save in the system_config table for each category
We should have a unique name because of that, we save the category id as key
*/
async saveSystemConfigData() {
const configs = [
{
key: CONFIGS.APP_SEO_SOCIAL + '_' + this.category.id,
value: [
{
key: CONFIGS.SOCIAL_FACEBOOK_TITLE,
value: this.facebookTitle,
},
],
},
]
//Storage data in the system_config table in the Shopware
await systemConfigService.saveConfigs(configs)
},
},
}
</script>
PS:It works if the user changes data in sw-text-field.but I need to save data when the user clicks on the save button in the header.