title: What's the correct to modify VUE component via javascript?
body: <p>javascript </p>
  
  <pre><code>(function(exports){
  
  Vue.component('my-component',{
      props: {
          name: String
      },
      template: '&lt;div&gt;\
      &lt;h1&gt;name: {{name}}&lt;/h1&gt;\
      &lt;/div&gt;\
      '
  });
  
  var myApp = new Vue({
      el: '#myApp'
  });
  
  exports.app = myApp;
  });
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;div id="myApp"&gt;
          &lt;my-component name="yo!" ref="test"&gt;&lt;/my-component&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>console or javascript to access component</p>
  
  <pre><code>app.$refs.test.name = "yo man";
  </code></pre>
  
  <p>Then console display Vue Warning as following.
  What's the correct to modify VUE component via javascript?</p>
  
  <p><strong>[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "name" 
  (found in component )</strong></p>