VueJS - how to show different div on radio button select

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>

Solution

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>