Laravel + Vue.js render template?

Question

Vue.js

there is a code that monitors push notifications

const app = new Vue({
        el: '#app',
        data: function() {
            return {
                user:{
                    avatar: '',
                    username: '',
                    login: '',
                    slug: ''
                },
                message: {
                    text: '',
                    date: ''
                }
            }
        },
        mounted(){
            window.Echo.private('user_notif')
                .listen('UserNotification', (e) => {
                    //console.log(e);
                    this.AppenToBrowser(e);
                });
    
        },
        methods: {
            AppenToBrowser(data){
                console.log(data);
                let audio = new Audio('/sounds/push.mp3'); // path to file
                audio.play();
            }
        }
    });

how can I display such a div in the AppendToBrowser () method on the site, can I call the balde template and pass the data variable there?

<div class="notify">
        <div class="notif--header">
            {{ data.user.name }}
        </div>
        <div class="notif--body">
            {{ data.data.text }}
        </div>
    </div>