title: how to expose property on component in vue.js 2.0
body: <p>I am thinking how to implement validation on vue.js component. </p>
  
  <p>The initial idea is that component validates and return an error code, like: "require", "min", "max" etc. Another component will display full text message according to this error code. </p>
  
  <p>Because error message might not always display inside component's template. I need two separated components.</p>
  
  <p>pseudo code is like this.</p>
  
  <pre><code>&lt;div&gt;
  &lt;mycomponent ref="salary" errcode="ErrorCode"&gt;&lt;/mycomponent&gt;
  &lt;/div&gt;
  .....
  &lt;div&gt;
  &lt;errormessage watchcomponent="salary" message="salaryErrorMessages"&gt;&lt;/errormessage&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>salaryErrorMessages is a hash of codes and messages. for example:
  {"require":"please enter salary",
  "min": "minimum salary value is 10000"}</p>
  
  <p>Vue has ref attribute on component, . I don't know if I can use ref to reference a component in attribute.</p>
  
  <p>Other solutions I considered:</p>
  
  <ol>
  <li>add an error object in model of the page, and pass into  using :sync binding.  can monitor same object.
  This requires to declare error messages in model.</li>
  </ol>
  
  <p>If I consider the requirement that page also needs to know if there is an error before post back. a global error object might be necessary.</p>
  
  <ol start="2">
  <li>use event bus or Vuex. 
  This seems official solution, but I don't know .</li>
  </ol>
  
  <p>When a page has multiple instances of , they will trigger same event. all  instances will monitor same event. </p>