Hello I am trying to await a button click inside a vue3 method, I basically want to click a button to start the function and then wait till the "confirm" or "cancel" button is clicked by the user, I am using the vue3 developer CDN (if that information is useful) Here's what I have so far:

<div v-if="hasAccess('FTO') && !selectedPlayerLoading" id="ftosheet-container">
    <div class="ftosheet-title noselect">FTO Sheet 
        <span v-if="hasAccess('FTO')" v-on:click='editFTOSheet()' style="float: right;">
            <i class="fas fa-edit"></i>
        </span>
    </div>

    <textarea class="ftosheet-text" v-model="selectedPlayer.ftosheet" :readonly="editingFTOSheet === false">
    </textarea>
    <div id="ftobutton-container">
        <button v-if="editingFTOSheet" id="saveftobutton">Save FTO Sheet</button>
        <button v-if="editingFTOSheet" id="cancelftobutton">Cancel</button>
    </div>
</div>

OnButtonPress() {
    Vue.nextTick(function () {
        return new Promise((resolve) => {
            const confirm = document.getElementById('saveftobutton')
            confirm.addEventListener('click', function() {
                resolve(true);
            });
            const deny = document.getElementById('cancelftobutton')
            deny.addEventListener('click', function() {
                 resolve(false);
            });
        });
    })
},

async editFTOSheet() {
    this.editingFTOSheet = !this.editingFTOSheet;
    if (this.editingFTOSheet) {
        const uneditedSheet = this.selectedPlayer.ftosheet;
        const buttonPress = await this.OnButtonPress();
        console.log(buttonPress);
        //TODO: Make work with await button press
    }
},

Obviously because the buttons only get rendered after clicking the "edit" button I need the nextTick I think? VS Code is also telling me that await has no effect here. Console prints undefined instantly after calling the OnButtonPress() function. Please let me know if you need any more information, Thanks!