VueJS - how to show different div on radio button select - vue.js

Question

How to show different component on radio button select.
<input type="radio" name="book" value="One" checked="checked">
<input type="radio" name="book" value="Round">
<div> // this should show show default, One is selected
<p>Value One</p>
</div>
<div> // this should show show on radio change to Round selected
<p>Value Round</p>
</div>

Answer 1

How about something like this?
new Vue({
el: '#app',
data: {
x: 'one',
},
});
<script src="https://rawgit.com/vuejs/vue/dev/dist/vue.js"></script>
<div id="app">
<input type="radio" v-model="x" value="one">
<input type="radio" v-model="x" value="two">
<div v-show="x === 'one'">One</div>
<div v-show="x === 'two'">Two</div>
</div>

Answer 2

i have done it with javascript .onclick it calls each function which hides & show element vice versa
function rdone(){
document.getElementById('one').style.display ='block';
document.getElementById('round').style.display ='none';
}
function rdround(){
document.getElementById('round').style.display = 'block';
document.getElementById('one').style.display ='none';
}
#round{
display:none;
}
<input type="radio" name="book" value="One" checked="checked" onclick="rdone();">
<input type="radio" onclick="rdround();" name="book" value="Round">
<div id=one> // this should show show default, One is selected
<p>Value One</p>
</div>
<div id=round> // this should show show on radio change to Round selected
<p>Value Round</p>
</div>