Q:

v-on:click not working after adding it through changing innerhtml

I was trying to make a dynamic navbar, which acts as following: if the session is logged in change the navbar from login and register to profile and log out, the buttons of login and register are working perfectly, but when changing them through js with innerHTML they don't do the function v-on:click
var nav_auth = document.getElementById("nav_auth");
nav_auth.innerHTML = `
    <li class="nav-item">
        <a class="nav-link" href="?profile"><i class="fas fa-user-circle user-circle-icon"></i> ` +
            this.user.name +
        `</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="?logout" v-on:click="logout()"> Logout </a>
    </li>`;

A:

Let vue change the dom.  Use v-if/else (or v-show/hide) to conditionally render (or include) elements in the dom.  

new Vue({
  el: '#example',
  data: {
    user: true,
  }
})
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<html>

<body>
  <div id="example">
    <div v-if="user">
      <button @click="user=!user">Logout</button>
      <button>Profile</button>
    </div>
    <div v-else>
      <button @click="user=!user">Login</button>
    </div>
  </div>
</body>

</html>

