Drawer in a component gives warning "Avoid mutating a prop directly..." in Quasar framework - quasar-framework

Question

I use Quasar framework in Version 1.6.2. and want to use a component (Drawer.vue) for my drawer. The component is used in my layout file (MainLayout.vue).
I get the following error message in my console:
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: "rightDrawerOpen"
The drawer works, but not on the first click – only on subsequent clicks.
What is the correct way to pass the parents model to my drawer?
Component: Drawer.vue
<template>
<q-drawer show-if-above v-model="rightDrawerOpen" side="right" bordered>
<q-list>
<q-item-label header>Menü</q-item-label>
</q-list>
</q-drawer>
</template>
<script>
export default {
name: "Drawer",
props: {
rightDrawerOpen: Boolean
}
};
</script>
Parent: MainLayout.vue
<Drawer :right-drawer-open="rightDrawerOpen" />

Answer 1

I would move the q-drawer component back into the MainLayout.vue component, then put the q-list into the child component. Then toggling "rightDrawerOpen" will occur in the "data" of MainLayout.vue instead of on the props of the child component which is where the error is coming from. Example:
MainLayout.vue:
<template>
<q-layout>
<q-drawer show-if-above v-model="rightDrawerOpen" side="right" bordered>
<DrawerContents />
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
<script>
import DrawerContents from './DrawerContents.vue';
export default {
components: {
DrawerContents,
},
data() {
return {
rightDrawerOpen: true,
};
},
};
</script>
DrawerContents.vue:
<template>
<q-list>
<q-item-label header>Menü</q-item-label>
</q-list>
</template>