Adding Vue object breaks JavaScript

I was having trouble with some vanilla JavaScript in my Vue app, and was able to replicate the trouble with this very simple test page:


  <section id="app">
    <a class="x" id="myBtn">Click me</a>


    const b = document.getElementById("myBtn");
    b.addEventListener("click", (e)=>{alert("hello");});

    const app = new Vue({el: "#app"});


The problem I’m having is that the event listener is not working (i.e. clicking on the link does not cause the alert to pop up.) No errors are generated at any point.

Yet, If I comment out the code for creating the Vue instance, everything works fine:

    //const app = new Vue({el: "#app"});

I’d greatly appreciate any insight as to why the original code does not work. Thanks!

I see that the original code works if I move the Vue instantiation ahead of the other JavaScript code. I suppose I need to study up on the lifecycle of the Vue instance and how vanilla JavaScript behaves in that context.

It is only expected.
Vue takes what is inside id="app" as a template and then replaces it with it’s own html.
Look in hooks diagram for a block after beforeMount

OK, thanks very much for the information.