Laravel+VUE: How to show 2 different div with 2 different buttons in the same blade

Question

Good night everybody!

I have one blade, when I have two different buttons:

<div class="col-md-12">
            <button v-on:click="isHidden = !isHidden"  type="button" class="w3-btn w3-blue" style="width:40%"><i class="fa fa-table fa-2x"></i> <br>SCHEDULE DATE</button>
            <br/> <br/>
            <button v-on:click="isHidden = !isHidden"  type="button" class="w3-btn w3-blue" style="width:40%"><a href="" class="text-white"><i class="fa fa-table fa-2x"></i> <br>SHOW DATES</a></button>
</div>


<div class="col-md-12 col-xl-12">
  <scheduledate v-if="!isHidden"></scheduledate>
  </div>

  <div class="col-md-12 col-xl-12">
  <showdate v-if="!isHidden"></showdate>


</div>

My problem is, how can I show the div when I click on one or other button? I want that when I click on the SCHEDULE BUTTON show/unhide me the if Click on the SHOW DATE button, show/unhide me the . This is my app.js

Vue.component('scheduledate', require('./components/scheduledate.vue').default);

Vue.component('showdate', require('./components/showdate.vue').default);

var app = new Vue({
    el: '#date',
   data: {
        isHidden: true
   }
});

var app = new Vue({
    el: '#showdate',
    data: {
        isHidden: true
    }
});

Thanks

Answer 1

Create 2 diffrent data for them like this

<div class="col-md-12">
<button v-on:click="scheduledate = !scheduledate"  type="button" class="w3-btn w3-blue" style="width:40%"><i class="fa fa-table fa-2x"></i> <br>SCHEDULE DATE</button>
<br/> <br/>
<button v-on:click="showdate = !showdate"  type="button" class="w3-btn w3-blue" style="width:40%"><a href="" class="text-white"><i class="fa fa-table fa-2x"></i> <br>SHOW DATES</a></button>
</div>


<div class="col-md-12 col-xl-12">
    <scheduledate v-if="scheduledate"></scheduledate>
</div>

<div class="col-md-12 col-xl-12">
    <showdate v-if="showdate"></showdate>
</div>

and

var app = new Vue({
    el: '#showdate',
    data: {
        scheduledate: true,
        showdate:true
    }
});