Multiple button toggle without using routes

Question

I've built a two button toggle using v-on:click that renders a specific data object on click, while removing the previously clicked object. I would like to continue this functionality with multiple data objects, so I could have numerous buttons and respective objects. I would like to achieve this without using routing but I am unsure of the best way.

I'm assuming I should be using binding, but I was unable to have a variable dynamically update depending on the which button is clicked.

One of my data objects:

const app = new Vue({
el: '#app',
data: {
search: '',
postList: [
new Post(
'Vue.js',
'https://vuejs.org/',
'mushroom',
'image/mushroom.jpg'),

new Post(
'React.js',
'https://facebook.github.io/react/',
'10 coin',
'https://daynin.github.io/clojurescript-presentation/img/react-logo.png'),

new Post(
'Angular.js',
'https://angularjs.org/',
'20 coin',
'https://angularjs.org/img/ng-logo.png'),

]},

computed: {
filteredList() {
  return this.postList.filter(post_any => {
    return 
post_any.author.toLowerCase().includes(this.search.toLowerCase());
  });
 } 
} 

});


 And a simple two way toggle:

  <div v-if="awesome">
 <div  id="#app">
 <div class="search-wrapper">
<input type="text" v-model="search" placeholder="Search title.."/>
    <label>Search title:</label>
 </div>
 <div class="wrapper">
  <div class="card" v-for="post in filteredList">
  <a v-bind:href="post.link" target="_blank">
    <img v-bind:src="post.img"/>
    <small>posted by: {{ post.author }}</small>
    {{ post.title }}
  </a>
  </div>
</div>
</div>
</div>


the buttons: 
 <h1 v-if="!awesomer"><button v-on:click="awesome = !awesome">Super 
Mario</button></h1>
<h1 v-if="!awesome"><button v-on:click="awesomer = !awesomer">Mario 

NES

No errors, but I believe there is a simple solution that I'm not seeing. Any suggestion on how to approach this issue or or resources that deal this type of feature would be greatly appreciated.