Ended up solving it this way:

I have a method called mbox (returns a promise) that creates a an instance of my component, adds it to the DOM, and then watches a property on that component to know which option the user chose. Resolves the promise once the user has chosen an option

My mbox method:

import MBOX from './components/mbox.vue';

import _Vue from 'vue';

export default {



mbox(mText, mTitle, mBtnCap1, mBtnCap2, mBtnCap3){

    return new Promise(async (resolve, reject) => {

        if (!mTitle){

            mTitle = 'My Title';

        }

        if (!mBtnCap1){

            mBtnCap1 = 'OK';

        }



        // I'm combining a bunch of stuff to make this work.

        // First, create the vue component

        var mboxInstance = _Vue.extend(MBOX); // mbox component, imported at top of Sublib

        var oComponent = new mboxInstance({ 

            propsData: { 

                msg: mText, 

                title: mTitle, 

                btnCap1: mBtnCap1, 

                btnCap2: mBtnCap2, 

                btnCap3: mBtnCap3,

                retval: 0

                }

        }).$mount();



        // now add it to the DOM

        var oEl = document.getElementById('app').appendChild(oComponent.$el);



        // NOTE: couldn't get it to work without adding a 'button' to activate it

        // progrmatically click it and make the button invisible

        // document.getElementById('mbox_btn_launch').click();

        var oLuanchBtn = document.getElementById('mbox_btn_launch');

        oLuanchBtn.style.visibility = 'hidden';

        oLuanchBtn.click();



        // Add a listener so we can get the value and return it

        oComponent.$watch('retval', function(newVal, oldVal){

            // this is triggered when they chose an option

            // Delete the component / element now that I'm done

            oEl.remove();

            resolve(Number(newVal));

        })

    }); // promise

}, // mbox

}

And My MBOX component:

<template>

<v-dialog max-width=290 persistent v-if=showMbox>

    <template v-slot:activator={on}>

        <v-btn id=mbox_btn_launch v-on=on>

            Test

        </v-btn>

    </template>

    <v-card>

        <v-card-title>{{title}}</v-card-title>

        <v-card-text>{{msg}}</v-card-text>

        <v-card-actions>

            <v-spacer></v-spacer>

            <v-btn v-if=btnCap1 @click=btnClicked('1')>{{btnCap1}}</v-btn>

            <v-btn v-if=btnCap2 @click=btnClicked('2')>{{btnCap2}}</v-btn>

            <v-btn v-if=btnCap3 @click=btnClicked('3')>{{btnCap3}}</v-btn>

        </v-card-actions>

    </v-card>

</v-dialog>

</template>

<script>

export default {

    name: 'mbox',

    data: () => ({

        showMbox: true    

    }),

    props: [

        // these can be passed in, the 'data' stuff can't

        'msg',

        'title',

        'btnCap1',

        'btnCap2',

        'btnCap3',

        'retval' // watches this so we know when they clicked something

    ],

    created(){    

        this.showMbox = true;

    }, 

    methods: {

    btnClicked: function(mBtnClicked){

        // mBtnClicked = Char. Has to be a character in order for it to pass it in. Not sure why, numerics didn't work

        mBtnClicked = Number(mBtnClicked);

        this.retval = mBtnClicked; // watcher in Sublib will detect this value has changed

        this.showMbox = false;

    } // btnClicked

} // methods

} // export default

</script>

<style scoped>

</style>

I can then call it like so:

var mChoice = await mbox('What do you want to do?', 'Title', 'Option 1', 'Option 2');

or for a simple 'validation' prompt:

if (!userName){

    mbox('You must enter a username');

    return;

}