I have a login page where once you hit the login button, your input is sent to the server and you receive data back. In the case that the data the user submitted is false, I want to inform the user. I've seen people using express sessions to highlight the fields in red for this but that seems very complex to me so I'd rather use something like a bootstrap toast which can be triggered via JS.

The issue I'm having is that I don't know how to properly edit the toasts body with Vue.

Here is the code for the response you get from the server

async function loginUser(event) {
    event.preventDefault();

    const result = await fetch('/api/login', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            username: usernameField.value,
            password: passwordField.value
        })
    }).then(res => res.json());
    if (result.status === 'ok'){
        document.cookie = "token=" + result.data.toString();
        window.location.href='/dashboard';
    }else if(result.status === 'error'){
        resultMessage = result.error; //!!! This value is set to null by default. !!!
        showToast();
    }
}

Here is the showToast method that is called if the login errors

function showToast(){
    var toastComponent = new bootstrap.Toast(errToast, option); // Option is how long the toast stays up for, and if it should have an animation
    toastComponent.show(); 
}

And here is the Vue code

const toast = Vue.createApp({
    data() {
        return {
            message: resultMessage
        }
    }
})

toast.mount('#errorToast');

The issue is is that this "message" Vue variable is set to null on mount. I've thought that maybe there's a way to change the message variable OUTSIDE of Vue but I don't think that's possible..

I'm pretty sure I cant use the vue-toast-notification plugin because I'm using the CDN version of Vue, not the actual build (Please correct me if I'm wrong).

If you can, please help out! How do I change the toasts body every time I get an error back from the server?