Как мне пользоваться data в App.vue?

Question

[Тимофей Михайлов]

Всем здравствуйте.
Вопрос наверное довольно простой, но я не пойму в чём проблема ...
Вот код: (это файл App.vue)

<template>
  <div id="app">
    <router-view/>
    <VuePopup
      v-if="this.showPopup"
      @closePopup="closePopup()"
    />
  </div>
</template>

<script>
import VuePopup from './components/VuePopup'

export default {
  name: 'App',
  date(){
    return {
      showPopup: true,
    }
  },
  components: {
    VuePopup
  },
  methods: {
    closePopup(){
      this.showPopup = false
    }
  },
  created() {
    this.$store.commit('runServer')
  }
}
</script>

Так вот, из-за того что я решил использовать Vue-Router, мой App.vue может запускать несколько различных страниц, в которых должен присутствовать компонент VuePopup.
Я подумал, зачем же каждый раз его импортировать в каждом компоненте, и решил запихнуть его в корень.
Всё нормально работает, но беда пришла откуда я не ждал ...
Никак не могу воспользоваться data. В чём может быть проблема?

Консоль выдаёт ошибку:

Property or method "showPopup" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

Answer 1

[Алексей Ярков]

Comments

[Тимофей Михайлов]

ахахахахах ))))
Вот это я выдаю ....

[Тимофей Михайлов]

Жесть какая ...
ппц, внимательность на нуле =(

[Тимофей Михайлов]

Спасибо!

[Алексей Ярков]

Тимофей Михайлов, бывает ))