How do I use data in App.vue?

Question

Vue.js

Hello everybody.
The question is probably quite simple, but I do not understand what the problem is ...
Here is the code: (this is the App.vue file )

<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>

So, because I chose to use Vue-Router , my App.vue can launch several different pages, which must contain a VuePopup component .
I thought, why import it every time in every component, and decided to shove it into the root.
Everything works fine, but the trouble came from where I didn’t expect ...
I just can’t use data . What could be the problem?

The console gives an error:

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