title: Vue.js Changing props
body: <p>I'm a bit confused about how to change properties inside components, let's say I have the following component:</p>
  
  <pre><code>{
      props: {
          visible: {
              type: Boolean,
              default: true
          }
      },
      methods: {
           hide() {
                this.visible = false;
           }
      }
  } 
  </code></pre>
  
  <p>Although it works, it would give the following warning: </p>
  
  <blockquote>
    <p>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: "visible" 
    (found in component )</p>
  </blockquote>
  
  <p>Now I'm wondering what the best way to handle this is, obviously the <code>visible</code> property is passed in when created the component in the DOM: <code>&lt;Foo :visible="false"&gt;&lt;/Foo&gt;</code></p>