title: Vue closing component returns avoid mutating a prop directly
body: <p>I have an component that I want to use on different pages. Well,  it is working well till the first toggle. It shows like it used to, but when I click the 'Close' button, it closes, but console outputs :</p>
  
  <blockquote>
    <p>[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: "visible"</p>
    
    <p>found in</p>
    
    <p>--->  at src/components/Snackbar.vue
            at src/views/Login.vue</p>
  </blockquote>
  
  <p>And after that it doesn't show up on click</p>
  
  <p>Any way to fix this?</p>
  
  <p>Snackbar.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;v-snackbar v-model.sync="visible" :timeout="5000" bottom&gt;
      {{ content }}
      &lt;v-btn flat color="primary" @click.native="visible = false"&gt;Close&lt;/v-btn&gt;
    &lt;/v-snackbar&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    export default {
      name: 'snackbar',
      props: [
        'visible',
        'content'
      ]
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>Login.vue</p>
  
  <pre><code>&lt;template&gt;
    &lt;div class="login"&gt;
      &lt;Snackbar :visible="snackbar.visible" :content="snackbar.content"&gt;&lt;/Snackbar&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
    import Snackbar from '@/components/Snackbar.vue'
    export default {
      components: {
        Snackbar
      },
      data: function() {
        return {
          email: '',
          password: '',
          snackbar: {
            visible: false,
            content: ''
          }
        }
      },
      methods: {
        login: function() {
          if (this.email != '' &amp;&amp; this.password != '') {
            // Do something
          } else {
            this.snackbar.content = 'Fields can\'t be empty';
            this.snackbar.visible = true;
          }
        }
      }
    }
  &lt;/script&gt;
  </code></pre>