css - Bulma's navbar-buger doesnt connect to menu items in Vue.js 2 -

i trying implement navbar application front end built using vue 2.0 , bulma . works on desktops , on smaller screens showing burger icon not showing elements. present.

<template> <div class="container is-fluid">     <div>       <nav class="navbar is-dark">         <div class="navbar-brand">           <a class="navbar-item" href="#">               <img  alt="k r o n o s" height="100px">           </a>           <div class="button navbar-burger" data-target="navmenu">               <span></span>               <span></span>               <span></span>         </div>         </div>         <div class="navbar-menu" id="navmenu">           <div class="navbar-end">             <div class="navbar-item">               <a class="" href="#"> docs </a>             </div>             <div class="navbar-item ">               <a class="" href="#"> report </a>             </div>             <div class="navbar-item">               <a class="">more</a>             </div>             <div class="navbar-item">               <a class="">logout</a>             </div>         </div>       </div>     </nav>   </div> </div> </template>  <script>  document.addeventlistener('domcontentloaded', function () {   // "navbar-burger" elements   var $navbarburgers = array.prototype.slice.call(document.queryselectorall('.navbar-burger'), 0)   // check if there navbar burgers   if ($navbarburgers.length > 0) {     // add click event on each of them     $navbarburgers.foreach(function ($el) {       $el.addeventlistener('click', function () {         // target "data-target" attribute         var target = $el.dataset.target         var $target = document.getelementbyid(target)          // toggle class on both "navbar-burger" , "navbar-menu"         $el.classlist.toggle('is-active')         $target.classlist.toggle('is-active')       })     })   } }) export default {   name: 'navbar',   data () {     return {       msg: ''     }   } } </script> <!-- add "scoped" attribute limit css component --> <style scoped> div{   border: 0px solid black; } </style> 

as can see have tried implementing example code in on present here no use. shouldnt bulma give me responsive navbar out of box. examples , solutions have found older "nav" class not newer "navbar". appreciated.

so, after bit of studying vue guide , clues fatman's comments, fix applied.

the above code works , more vue-ish way navbar-burger menu.

<template>        <nav class="navbar">         <div class="container">         <div class="navbar-brand is-large">           <a class="navbar-item" href="#">               <img  alt="k r o n o s" height="100px">           </a>           <button @click="makeburger" class="button navbar-burger" data-target="navmenu" v-bind:class="{ 'is-active': activator }">               <span></span>               <span></span>               <span></span>         </button>         </div>         <div class="navbar-menu" id="navmenu" v-bind:class="{ 'is-active': activator }">           <div class="navbar-end">             <div class="navbar-item">               <a class="" href="#"> docs </a>             </div>             <div class="navbar-item ">               <a class="" href="#"> report </a>             </div>             <div class="navbar-item">               <a class="">more</a>             </div>             <div class="navbar-item">               <a class="">logout</a>             </div>         </div>       </div>       </div>     </nav>  </template>  <script> export default {   name: 'navbar',   data () {     return {       msg: '',       activator: false     }   },   methods: {     makeburger () {       this.activator = !this.activator       return this.activator     }   } } </script> <!-- add "scoped" attribute limit css component --> <style scoped> div{   border: 0px solid black; } </style> 

hope helps someone. show/hide functionality taken care bulma.