title: Why is my boolean always true when passing it as value to a radio component?
body: <p>so I am learning vue and have spent some time going through the documents and haven't seen the answer that solves my question. A lot of this is due to the nomenclature between using the CLI(which I am) and not. </p>
  
  <p>I am trying to make it so that when one radio button is clicked it shows a div and when the other one is clicked it shows the other. Here is what I have.</p>
  
  <p>Template:</p>
  
  <pre><code>&lt;div id="daySelection"&gt;
      &lt;div class="o-m-day"&gt;
          &lt;div id="oneDay"&gt;
              &lt;p&gt;One day?&lt;/p&gt;&lt;input v-model="selected" type="radio" name="oneDay" id="" class="r-button" value="true"&gt; 
          &lt;/div&gt;
          &lt;div id="multipleDays"&gt;
              &lt;p&gt;Multiple days?&lt;/p&gt; &lt;input v-model="selected" type="radio" name="multDays" id="" class="r-button" value="false"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- the div where the conditional render will be rendered --&gt;
      &lt;div&gt;
          &lt;!-- multiple days --&gt;
          &lt;div v-show="selected" id="ta-multDays"&gt;
              &lt;textarea  rows="10" cols="80" name="multDays" type="text" /&gt;
          &lt;/div&gt;
          &lt;!-- one day --&gt;
          &lt;div v-show="!selected" id="i-oneDay"&gt;
              &lt;input type="text" name="r-oneDay"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the script:</p>
  
  <pre><code>export default {
      name: 'CreateTournamentForm',
      data: function(e) {
          return {
              selected: Boolean,
          }
      },
  }
  </code></pre>
  
  <p>above I was getting an error in the console that was saying that data needs to be a function that returns a new instance. I see many people and examples using vue instances differently where it is:</p>
  
  <pre><code>const app = new Vue({
      el: '#app',
      data: {
          selected: true,
      }
  });
  </code></pre>
  
  <p>However whenever trying this Vue sends me a warning saying that it needs to be a function.</p>
  
  <blockquote>
    <p>[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.</p>
  </blockquote>
  
  <p>I am also aware that v-show toggles the display so I have tried both setting the display of the divs to:</p>
  
  <pre><code>display: none;
  </code></pre>
  
  <p>as well as not.</p>