Приложение vuejs не работает, встроенный код переключения

Question

M новое для vue m создание вертикальной навигационной панели по нажатию значка меню, навигационная панель должна переключать
мой код значка меню

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

при переключении значка меню я хочу показать боковую панель навигации

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

мой код vue

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

он не отображает ничего нового для vue, может кто-нибудь помочь мне разобраться в происходящем

Обновлен код

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>

обновить скрипт сценария

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

, но все равно не работает.теперь появляется только кнопка меню, но переключатель не работает.может кто-нибудь знает, где я иду не так

Answer 1

Добавить @click слушателя на кнопку

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

Добавить директиву v-if на боковой панели, которая будет переключать видимость боковой панели

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

Добавить method вобрабатывать событие click methods: toggleSidebar .... и переключать значение, используемое в директиве v-if

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