VueJS @click with anchor tags

Question

I have a single page application with a side navigation bar which has a set of anchor tags in a list.

I want to show which content to show in the page depending on the value of the selectedPage variable. As well as change the value of selectedPage based on the link that is clicked in the side bar.

Even when including .prevent on the click event the code below does not change the value of the variable. Is there another condition I should be using instead

MyPage.html

#Navbar for selecting content
<div id="sidebar-wrapper">
      <ul class="sidebar-nav">
        <li><a href="#" @click.prevent="selectedPage ='Foo'">Foo</a></li>
        <li><a href="#" @click.prevent="selectedPage ='Bar'">Bar</a></li>
      </ul>
</div>

#Page content
<div id="page-content-wrapper">
 <div class="main-content" id="app" v-cloak>

  <div class="container-fluid" v-if="selectedPage === 'Foo'">
   <h3 class="page-title">{{selectedPage}}</h3>
  </div>

  <div class="container-fluid" v-if="selectedPage === 'Bar'">
   <h3 class="page-title">{{selectedPage}}</h3>
  </div>
 </div>
</div>

App.js

new Vue({
  el: '#app',
  data: {
    selectedPage: 'Foo',
  }
})

Answer 1

This works as I expect; is it working how you expect?

new Vue({
  el: '#app',
  data: {
    selectedPage: 'Foo'
  }
});

#app {
  display: flex;
}

#sidebar-wrapper {
  border-right: solid thin black;
  margin-right: 15px;
  padding-right: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>
<div id="app">
  <div id="sidebar-wrapper">
    <ul class="sidebar-nav">
      <li><a href="#" @click.prevent="selectedPage ='Foo'">Foo</a></li>
      <li><a href="#" @click.prevent="selectedPage ='Bar'">Bar</a></li>
    </ul>
  </div>

  #Page content
  <div id="page-content-wrapper">
    <div class="main-content" id="app" v-cloak>

      <div class="container-fluid" v-if="selectedPage === 'Foo'">
        <h3 class="page-title">{{selectedPage}}</h3>
        Foo section
      </div>

      <div class="container-fluid" v-if="selectedPage === 'Bar'">
        <h3 class="page-title">{{selectedPage}}</h3>
        Bar section
      </div>
    </div>
  </div>
</div>