title: vue @click parameter not defined
body: <p>What I am doing wrong</p>
  
  <p>I have this:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;stepTitle number=1 @click.native="setStep(number)"  :class=" step === 1 ? 'active' : 'un-active' " title="Let's get started"/&gt;
  </code></pre>
  
  <p>then in the methods:</p>
  
  <pre class="lang-javascript prettyprint-override"><code>methods: {
          setStep: function (event) {
  
              // some code
          }
      }
  </code></pre>
  
  <p>and I get this error:</p>
  
  <pre><code>[Vue warn]: Property or method "number" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
  </code></pre>
  
  <p>Here is the file</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;template&gt;
      &lt;div id="app"&gt;
          &lt;stepTitle number=1 @click.native="setStep(number)"  :class=" step === 1 ? 'active' : 'un-active' " title="Let's get started"/&gt;
          &lt;section-container&gt;&lt;/section-container&gt;
          &lt;stepTitle number=2  @click.native="setStep(number)" :class=" step === 2 ? 'active' : 'un-active' " title="PICK DATE &amp; TIME"/&gt;
          &lt;section-container&gt;&lt;/section-container&gt;
          &lt;stepTitle number=3  @click.native="setStep(number)" :class=" step === 3 ? 'active' : 'un-active' " title="LOGIN/REGISTER"/&gt;
      &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
      /* eslint-disable no-console */
      import stepTitle from './components/stepTitle.vue'
      import sectionContainer from './components/sectionContainer'
  
      export default {
          name: 'app',
          components: {
              stepTitle,
              sectionContainer
          },
          data: function () {
              return {
                  count: 0,
                  step: 1
              }
          },
          methods: {
              setStep: function (event) {
  
                  // some code
              }
          }
  
  
      }
  &lt;/script&gt;
  
  
  &lt;style&gt;
      @import 'https://fonts.googleapis.com/css?family=Titillium+Web:300,400';
  &lt;/style&gt;
  </code></pre>