title: Show string in component
body: <p>I am trying to learn Vue.js, and am playing around with the <a href="https://v2.vuejs.org/v2/examples/modal.html" rel="nofollow noreferrer">modal component example</a>.  I'm trying to change it up a bit so that the button clicked can provide data to the component (I'm <em>very</em> new to this so my terminology may be off).</p>
  <p>I've updated the app to be:</p>
  <pre><code>// start app
  var app = new Vue({
    el: '#app',
    data: {
      showModal: false,
      title: 'Default Title'
    },
    methods: {
      modalInit: function(title) {
        //this.title = title;
        this.showModal = true;
      }
    }
  })
  </code></pre>
  <p>The updates were mainly so that I can change the title within the modal based on the button clicked, here is the update to the button:</p>
  <pre><code>&lt;button id=&quot;show-modal&quot;@click=&quot;modalInit('A title')&quot;&gt;Show Modal&lt;/button&gt;
  </code></pre>
  <p>The relevant portion of the x-template:</p>
  <pre><code>&lt;div class=&quot;modal-header&quot;&gt;
    &lt;h2&gt;{{ title }}&lt;/h2&gt;
  &lt;/div&gt;
  </code></pre>
  <p>Not sure if it matters, but the component is:</p>
  <pre><code>Vue.component('modal', {
    template: '#modal-template',
  })
  </code></pre>
  <p>In this state, the modal will open fine but the title won't be there and I get the console error: <code>[Vue warn]: Property or method &quot;title&quot; is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.</code></p>
  <p>I can't figure out to to properly &quot;declare reactive data properties in the data option&quot;.</p>
  <p>Thanks!</p>