title: want to use vuetify snackbar as a global custom component in vuejs
body: <p>i used snackbar to show success messages in vuejs. i want to make a global custom snackbar component.</p>
  <pre><code>&lt;template&gt;
    &lt;div name=&quot;snackbars&quot;&gt;
      &lt;v-snackbar
        v-model=&quot;snackbar&quot;
        :color=&quot;color&quot;
        :timeout=&quot;timeout&quot;
        :top=&quot;'top'&quot;
      &gt;
        {{ text }}
  
        &lt;template v-slot:action=&quot;{ attrs }&quot;&gt;
          &lt;v-btn dark text v-bind=&quot;attrs&quot; @click=&quot;snackbar = false&quot;&gt;
            Close
          &lt;/v-btn&gt;
        &lt;/template&gt;
      &lt;/v-snackbar&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
    props: {
      snackbar: {
        type: Boolean,
        required: true,
      },
      color: {
        type: String,
        required: false,
        default: &quot;success&quot;,
      },
      timeout: {
        type: Number,
        required: false,
        default: 3000,
      },
      text: {
        type: String,
        required: true,
      },
    },
  };
  &lt;/script&gt;
  </code></pre>
  <p>then i import this as a component in my every form like this.</p>
  <pre><code>&lt;SnackBar :snackbar=&quot;snackbar&quot; :color=&quot;color&quot; :text=&quot;text&quot; /&gt;
  </code></pre>
  <p>but my issue is i can't use snackbar as a prop in my child component. it shows me this error.</p>
  <pre><code>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: &quot;snackbar&quot; 
  </code></pre>
  <p>how can i fix this issue. can anyone help me?</p>