How to refer to a dynamically created vue component?

Question

JavaScript

Actually a subject.
Created a vue component and wrapped it in a dynamically created object. It is necessary that the block is displayed only at a resolution > 768px. The script works, but when I enter object data, -__- stops working. Tell me, where is the error?

(function () {

    Vue.component('footer-bar', {
        template: `
        <div id="footer-bar">
            This block nav
        </div>
        `
    })

    const bar = document.createElement('div');
    bar.id = 'navbar';
    const body = document.body;
    body.appendChild(bar);

    new Vue({
        el: '#navbar',
        template: `
        <div id="navbar">
            <footer-bar></footer-bar>
        </div>
        `
    })

    function smallMedia(sm) {
        if (sm.matches) {
            bar.style.display = "block";
        } else {
            bar.style.display = "none";
        }
    }

    const mqSm = window.matchMedia("(min-width: 768px)");
    smallMedia(mqSm);
    mqSm.addListener(smallMedia);

})();

Answer 1

To solve these problems, CSS has a media property :

@media screen and (max-width:350px) {
    .object {
        display: none;
    }
}

Answer 2

I decided. Created a new variable const db = document.getElementById('navbar');and it worked.