I'm new to Vue I wanted to reuse the snackbar / alert box from vuetify to each of my components. I did it by copy pasting the code for each component which makes it very messy and hard to maintain. 

How do I reuse this for each of my view vue component? 

Please see my example code below.

**Vue component < template >**

```
 <v-snackbar
  v-model="snackbar.appear"
  :color="snackbar.color"
  :timeout="snackbar.timeout"
  :left="snackbar.x === 'left'"
  :right="snackbar.x === 'right'"
  :top="snackbar.y === 'top'"
> 
  <v-row>
    <v-icon class="mx-2" size="18" dark>{{ snackbar.icon }}</v-icon>
    {{ snackbar.text }}
  </v-row>
  <v-btn dark text @click="snackbar.appear = false">OKAY</v-btn>
</v-snackbar>

```

**Vue component < script >**

```
snackbar: {
    appear: false,
    icon: '',
    text: '',
    color: 'success',
    timeout: 2500,
    x: 'right',
    y: 'top',
  },

axios 
.post('/api/department-objective', { corporate_objective_id, objective, description })
.then(response => {
  this.snackbar.appear = true
  this.snackbar.text = response.data.text
  this.snackbar.icon = response.data.icon
})
.catch(error => {
  console.log(error)
  this.alert = true
  this.allerror = error.response.data.errors
})

```