VueJS Hello world

HTML

<!-- Include the library in the page -->
<script src="https://unpkg.com/vue@2.2.0-beta.1/dist/vue.js"></script>

<!-- App -->
<div id="app">
   <table class="table">
    <thead>
       <tr>
       <th>Menu</th>
           <label><input type="checkbox" v-model="selectedMenu" value="0" />
          All</label>
       <th>Submenu</th>
        </tr>
     </thead>
      <tbody>
          <tr v-for="menu in menus" :key="menu.id">
             <td>
                        <label>
                          <input
                            type="checkbox"
                            :value="menu.id" @change="setSelectedMenu($event,menu.id)"
                          />@{{ menu.menuName }}
                          </label
                        >
                      </td>
                      <td >
                        <ul>
                          <li
        v-for="submenu in filteredProduct"
                         :key="submenu.id"  v-if="menu.id == submenu.menuId">
                        
                                <input type="checkbox" :value="submenu.id"  />
                                 <label  >{{ submenu.subMenuName }}  </label>
                                
                          </li>
                        </ul>
                      </td>
                     
                    </tr>
                  </tbody>
                </table>
  
</div>

JavaScript

console.clear()
console.log('Yes! We are using Vue version', Vue.version)

// New VueJS instance
var app = new Vue({
  el: "#app",
  data: {
      menus: [
    { id: 1, menuName: "Tech 1" },
    { id: 2, menuName: "Tech 2" },
    { id: 3, menuName: "Tech 3" }],
         selectedMenu: [],
        submenus: [
    { id: 1, menuId: 1, subMenuName:"architecture" },
    { id: 2, menuId: 1, subMenuName:"Electrical" },
    { id: 3, menuId: 1, subMenuName:"Electrical" },
    { id: 4, menuId: 2, subMenuName:"IEM" },
    { id: 5, menuId: 3, subMenuName:"CIVIL"}],
    
  },
   computed: {
          filteredProduct: function () {
            const app = this,
              menu = app.selectedMenu;

            if (menu.includes("0")) {
              return app.submenus;
            } else {
              return app.submenus.filter(function(item){
      return menu.indexOf(item.menuId) >= 0;
    });
            }
          },
        },
  methods: {

    setSelectedMenu:function(event,menu_id){
  
  if (event.target.checked) {
    		this.selectedMenu.push(menu_id);
      }
      else{
       var index= this.selectedMenu.indexOf(menu_id);
      	this.selectedMenu.splice(index,1);
      }
    }
  }
})