title: Vuejs toggle div visibility on checkbox selection
body: <p>I am trying to toggle the visibility of a container div using Vuejs I have tried two methods as per below but neither have any affect on visibility of the container. Method 1:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="checkbox" id = "selector"&gt;
          &lt;label&gt;&lt;input type="checkbox" v-model="checked"&gt;Options&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="container" id="app-container" v-if="checked"&gt;
          &lt;p&gt;Text is visible&lt;/p&gt;
      &lt;/div&gt;
  &lt;script src="path_to_/vue.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      var app = new Vue({
          el: '#selector',
          data: {
              "checked": false
          }
       })
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>I know Vue.js loads OK, ticking the checkbox has no effect on text visibility.</p>
  
  <p>Method 2:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div class="checkbox" id = "selector"&gt;
          &lt;label&gt;&lt;input type="checkbox" v-on:click="seen = !seen"&gt;Options&lt;/label&gt;
      &lt;/div&gt;
      &lt;div class="container" id="app-container" v-if="seen"&gt;
          &lt;p&gt;Text is visible&lt;/p&gt;
      &lt;/div&gt;
  &lt;script src="path_to_/vue.js"&gt;&lt;/script&gt;
  &lt;script&gt;
      var app = new Vue({
          el: '#selector',
          data: {
              "seen": false
          }
       })
  &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Again, ticking the checkbox has no effect. Any ideas?</p>