How to use dynamic html content within the dialog message?

[adam-jones-net]

I'd love to be able to use this plugin to handle a couple of drop down boxes that are being populated by ajax and where the second drop down box refreshes each time a change is made to the first one.

To start testing this idea I made the following sample inspired by code from the vue documentation here which generates a select list and then should dynamically update a label next to it each time the select value changes.

let options = {
    html: true,
    reverse: true,
    okText: 'Submit',
    cancelText: 'Cancel',
    animation: 'zoom',
    backdropClose: true 
};
this.$dialog.confirm('<select v-model="selected"> <option disabled value="">Please select one</option> <option>A</option> <option>B</option><option>C</option></select><span>Selected: {{ selected }}</span>',options).then(function () {
    console.log('Clicked on submit')
})

When my dialog opens the select box is present but the dynamic text never updates, it just reports

Selected: {{ selected }}

Is what I'm trying to achieve possible via vue tags such as {{}} and its just that I've not implemented correctly or is this going to be a real mess and outside of the purpose of the plugin ?

[Godofbrowser]

Please use custom component for custom functionalities