title: Vue Component, toggle data
body: <p>Think i'm cracking up, this is some very basic stuff but it doesn't seem to be working... </p>
  
  <p>Basically clicking the link should toggle <code>display</code> between true and false, but this isn't the case. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>Vue.component('dropdown', {
      props: [ 'expanded' ],
      data: function() {
        return {
          display: !!(this.expanded)
        }
      },
      template: '&lt;div&gt;&lt;transition name="expand"&gt;&lt;slot :display="display"&gt;&lt;/slot&gt;&lt;/transition&gt;&lt;/div&gt;'
    });
    window.app = new Vue({
     el: '#app'
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;
  &lt;div id="app"&gt;
      &lt;dropdown&gt;
        &lt;div slot-scope="{ display }"&gt;
          &lt;a href="javascript:void(0)" @click="display = !display"&gt;Toggle {{ display }}&lt;/a&gt;
          &lt;div v-if="display"&gt;
            Dropdown content
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/dropdown&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Edit: </p>
  
  <p>Updated code, I forgot I changed that, I did infact have the click event as <code>display = !display</code>. But even with that said, if you had tried to click the button you would see that it doesn't change the true either... </p>