Избегайте прямого изменения свойства, так как значение будет перезаписываться при повторном рендеринге родительского компонента. ошибка тайм-аута закусочной

Question

Я использую закусочную как глобальный компонент для использования на каждом компоненте.

Это мой Login.vue (я использую закусочную на странице входа в систему):

<snackbar 
    :snackbar="snackbar_data.snackbar" 
    :color="snackbar_data.color" 
    :text="snackbar_data.text"></snackbar>

data: () => ({
    snackbar_data: {
        snackbar: false,
        color: 'success',
        is_list: false,
        text: ''
    }
})

И мой snackbar.vue is:

<template>
     <v-snackbar
     v-model="snackbar"
     :timeout="timeout"
     :color="color"
     :right="true"
     :top="true"
     :multi-line="true"
     v-on:requestClose="close">

          <h3>{{ text }}</h3>

          <v-btn class="mx-2" text color="transparent" @click="$emit('requestClose')">
              <v-icon color="white">mdi-close</v-icon>
          </v-btn>
     </v-snackbar>
 </template>
 <script>
 export default {
     props: ['snackbar', 'color', 'text'],

     data() {
         return {   
             timeout: 3000
         }
     },

     methods: {
         close() {
            this.snackbar = false;
         }
     }
 }
 </script>

Моя проблема в том, что снэк-бар автоматически закрывается, и я получаю ошибку ниже:

Избегайте прямого изменения значения пропа, так как значение будет перезаписано всякий раз, когда родительский компонент перерисовывается. Вместо этого используйте данные или вычисляемое свойство, основанное на значении реквизита. Подставка изменена: «закусочная»

найдена в

---> в src / views / core / snackbar. vue в src / views / user / Login. vue

Я сослался на ответ stackoverflow Vue при возврате из закрывающего компонента избегайте прямого изменения опоры

Все еще я получаю ошибку.