<div id="root" class="container">
  <div class="counter">
    <h1 v-text="count" class="count">0</h1>
  <div v-if="toggle" class="control">
    <button @click="increment" class="button is-primary is-large">Increment</button>
  
  <button @click="decrement" class="button is-danger is-large">Decrement</button>
  </div>
  <div class="toggle">
    <br>
    <button class="button is-info" @click="toggleButton">Toggle Controls</button>
  </div>
  </div>
</div>
.container{
  width:100%;
}
.counter{
/*   width:100%; */
  margin:20px auto;
  text-align:center;
}
.counter >h1{
  text-align:center;
  padding:30px;
  font-size:100px 
}
.control{
  display:inline-block;
  margin: 0px auto;
}
const toggleMixin ={
  data(){
    return {
      toggle: true
    }
  },
  methods:{
    toggleButton(){
      this.toggle = !this.toggle
    }
  }
}

var vm = new Vue({
  el:'#root',
  mixins:[toggleMixin],
  data:{
    count:0,
  },
  methods:{
    increment(){
      this.count += 1
    },
    decrement(){
    this.count -= 1
  }
  }
})
Run Pen

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.4.2/css/bulma.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js