vue.jsでのv-if文での再描画がうまくいかない

お世話になっております。

vue.jsで
「サイト内で、特定の箇所をクリックすることで関数を動作させ、
別の箇所のコンテンツを切り替える」という設定をしようとしています。

コンテンツメイン
コンテンツa
コンテンツb

があり、
コンテンツa、bをそれぞれクリックするとコンテンツメインのhtmlやcssがそれに対応した内容に切り替わるイメージです。
現在、vue.jsでコンテンツa.bをクリックしたときの中身の変数により、
html側でv-if文で切り替えようとしていますが、なぜか切り替わりません。
consol.logで見るときちんと変数の中身は切り替わっているようです。

html
1<div id="app">
2     <template v-if="menu === '1'">
3      <p>コンテンツA</p>
4    </template>
5
6    <template v-else>
7     <p>コンテンツB</p>
8    </template>
9
10
11    <div v-on:click="choice1">
12     <button>ボタン1</button>
13    </div>
14
15    <div v-on:click="choice2">
16     <button>ボタン2</button>
17 </div>

app.js
1new Vue({
2  el:'#app',
3  data:{
4    menu:1
5},
6methods:{
7  choice1:function(){
8    menu = 1
9    console.log(menu)
10  },
11  choice2:function(){
12    menu = 2
13    console.log(menu)
14  }
15}
16})
17