I have a Primevue Select dropdown list that retrieves the items from the datatable. I want to add a button to that same list that makes a post call to add another item to the datatable. Have no idea how to achieve this. Here is the code:

<script>
import axios from 'axios'

export default {
    name: "AddWine",
    props: {
        wineTypes: Array,
        countries: Array
    },
    data() {
        return {            
            visible: false,
            selected: {
            name:'',
            wine_type: '',
            country: ''
            },
        }
    },
    methods: {
        addWine() {
            this.visible = false
            axios.post("http://localhost:8081/wine", this.selected)
            .then(res => {
                console.log(res.data)  
             })
            .catch((error) => {
                window.alert(`The API returned an error: ${error}`);
            })
        },
        addCountry() {
            axios.post("http://localhost:8081/country", this.selected)
            .then(res => {
                console.log(res.data)  
             })
            .catch((error) => {
                window.alert(`The API returned an error: ${error}`);
            })
        }
    }
}
</script>

<template>
    <div class="card flex justify-center">
        <Button label="+ Add Wine" @click="visible = true" />
        <Dialog v-model:visible="visible" modal header="What wine would you like to add?" :style="{ width: '25rem' }">
            <div class="flex items-center gap-4 mb-4">
                <label for="name" class="font-semibold w-24">Name</label>
                <InputText v-model="selected.name" id="name" class="w-full md:w-[14rem]" autocomplete="off" />
            </div>
            <div class="flex items-center gap-4 mb-4">
                <label for="wineTypes" class="font-semibold w-24">Type</label>
                <Select v-model="selected.wine_type" :options="wineTypes" optionLabel="name" optionValue="id" class="w-full md:w-[14rem]" />
            </div>
            <div class="flex items-center gap-4 mb-8">
                <label for="countries" class="font-semibold w-24">Country</label>
                <Select v-model="selected.country" :options="countries" optionLabel="name" optionValue="id" class="w-full md:w-[14rem]" />
            </div>
            <div class="flex justify-end gap-2">
                <Button type="button" label="Cancel" severity="secondary" @click="visible = false"/>
                <Button type="button" label="Save" @click="addWine" />
            </div>
        </Dialog>
    </div> 
</template>

I tried adding a button as a template or an option but no luck, the button is no displayed.