Update parent state when Vuetify snackbar timeouts - vuejs2

Question

Currently I have a Parent and a Child component. In the Parent component I set the snackbar state to true after a successful API call so it shows the snackbar. When I click on the close button in the snackbar the state of the Parent gets updated and the snackbar disappears. However, when the snackbar timeouts I get the following error:
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:
"snackbar"
How can I update the Parent state when the snackbar timeouts? Is there a clean way to do this?
This is my Parent component:
<Snackbar :snackbar="snackbar" :y="bottom" :text="text" #update-snackbar="updateSnackbar"></Snackbar>
<script>
import Snackbar from "../components/Snackbar";
export default {
name: "AddFriend",
components: {Snackbar},
methods: {
updateSnackbar(e) {
this.snackbar = e;
},
add() {
const username = "test";
axios
.post('/api/friend/add',
{
username: username
})
.then(response => {
if (response.data.success) {
this.snackbar = true;
this.text = 'Request successfully send!';
} else {
this.snackbar = true;
this.text = response.data.error;
}
})
.catch(err => {
console.log('Something went wrong: ' + err);
this.snackbar = true;
this.text = 'test';
})
}
},
data() {
return {
error: null,
valid: false,
text: null,
snackbar: false,
bottom: 'bottom',
}
}
}
</script>
And this is my Child (snackbar) component:
<template>
<v-snackbar
v-model="snackbar"
:bottom="y === 'bottom'"
:timeout="1500"
:vertical="mode === 'vertical'"
>
{{ text }}
<v-btn
color="red"
flat
#click="closeSnackbar(false)"
>
Close
</v-btn>
</v-snackbar>
</template>
<script>
export default {
name: "Snackbar",
props: {
snackbar: Boolean,
y: String,
x: null,
mode: String,
text: String
},
methods: {
closeSnackbar(snackbar) {
this.$emit('update-snackbar', snackbar);
}
},
data() {
return {}
}
}
</script>
If someone knows how to do this please let me know. Also if a CodeSandBox is needed I will create one. Thanks in advance!

Answer 1

I managed to update the parent state on timeout. I did this by adding:
#input="closeSnackbar"
to my v-snackbar. When the timeout occurs it now triggers the closeSnackbar function which updates my parent component. For everyone with the same problems here is my full snackbar component:
<template>
<v-snackbar
:value="snackbar"
#input="closeSnackbar"
bottom
:timeout="1500"
>
{{ text }}
</v-snackbar>
</template>
<script>
export default {
name: "Snackbar",
props: {
snackbar: Boolean,
text: String
},
methods: {
closeSnackbar(snackbar) {
this.$emit('update-snackbar', snackbar);
}
},
}
</script>