vuejs application doesnt work toggle code integrated

Question

M new to vue m creating a vertical navigation bar on click of menu icon the navbar must toggle
my menu icon code

    <button type="button" id="sidebarCollapse" class="btn btn-info [collapsed?'':'sidebar']"  >
    <i class="fas fa-align-left"></i>
    </button>

on toggle of the menu icon i wanna show the nav sidebar

   <nav id="sidebar" class="sidebar">
    </nav>

my vue code

  new Vue({
   e1:'#app',
   data:{
       collapsed:true
   }
})

it doesnt display any thing m new to vue can anyone help me out whats happening

Updated code

Position.vue

  <template>
   <div class="wrapper">
     <nav id="sidebar" class="sidebar" v-if="showSidebar">  
       <ul class="list-unstyled component">
            <li class="active">
                <a href="#homeSubMenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">Home</a>
                <ul class="collapse list-unstyled" id="homeSubMenu">
                    <li class="dropdown-menu-mn">
                        <a href="#">Home1</a>
                        <a href="#">Home2</a>
                    </li>
                </ul>
            </li>                                                 
        </ul>
    </nav>        
        <div id="content">
            <nav>
                <div class="navbar navbar-expand-lg navbar-light bg-light">
                    <div class="container-fluid">

                        <button type="button" id="sidebarCollapse" class="btn btn-info" @click="toggleSidebar">
                          <i class="fas fa-align-left"></i>
                        </button>
                    </div>
                </div>
            </nav>
        </div>        
    </div>  
   </template>

  <script>
    new Vue({
    el:'#app',
    data: {
   showSidebar: false
    },
    methods: {
  toggleSidebar: function() {
     this.showSidebar = !this.showSidebar;
  }}})            
  </script>

update script tag

    <script>
    export default{
    data() {
   showSidebar: false
    },
     toggleSidebar(){
     this.showSidebar = !this.showSidebar;
    } };   
   </script>

but it still doesnt work. now ony the menu button appears but the toggle doesnt work. can anyone lemme know where m going wrong

Answer 1

Add @click listener on the button

    <button type="button" id="sidebarCollapse" class="btn btn-info" @click="toggleSidebar">
       <i class="fas fa-align-left"></i>
    </button>

Add v-if directive on the sidebar that will toggle the visibility of the sidebar

   <nav id="sidebar" class="sidebar" v-if="showSidebar">
    </nav>

Add method to handle the click event methods: toggleSidebar .... and toggle the value which is used in the v-if directive

  new Vue({
   el:'#app',
   data: {
       showSidebar: false
   },
   methods: {
      toggleSidebar: function() {
         this.showSidebar = !this.showSidebar;
      }
   }
  })