title: Vue Js Components does not get destroyed?
body: <p>I'm currently working on an very versatile dashboard to display various data.</p>
  
  <p>For the frontend I'm using the latest nuxt and vue version.</p>
  
  <p>My dashboard has many kinds of variations to display data (for example pie charts, line charts,...) these are described in components which are called dynamically. </p>
  
  <p>The Problem is that when I browse from the Page "/" to another (for example "/foo") the interval gets fired again and crashes the app.
  That happenes after the lifecycle hook destroyed. I tried to define the interval as an variable and stop it in the beforeDestroy hook but it did not help.</p>
  
  <pre><code>let interval= setInterval(this.fetchData.bind(null, configuration, connector), configuration.refreshTime)
  
  /* later */
  clearInterval(interval);
  </code></pre>
  
  <p>Do you see an error?</p>
  
  <p>Thank you.</p>
  
  <hr>
  
  <p>Thats the relevant code:</p>
  
  <p>Template</p>
  
  <pre><code>&lt;no-ssr&gt;
    &lt;v-container grid-list-md&gt;
      &lt;v-layout row wrap v-masonry transition-duration="0.5s" item-selector=".flex" column-width="#grid-sizer"&gt;
        &lt;v-flex xs1 sm1 md1 lg1 x1 id="grid-sizer"&gt;&lt;/v-flex&gt;
        &lt;component :key="dashboardItem.id" v-for="(dashboardItem,index) in dashboardItems" :is="dashboardItem.type" :connector="dashboardItem.connector"
          :type="dashboardItem.type" :configuration="dashboardItem.configuration" :id="dashboardItem.id" :index="index"&gt;&lt;/component&gt;
      &lt;/v-layout&gt;
    &lt;/v-container&gt;
  &lt;/no-ssr&gt;
  </code></pre>
  
  <p>Script</p>
  
  <pre><code>import OnlyValue from '@/components/dashboardItems/OnlyValue.vue'
  import TrafficLight from '@/components/dashboardItems/TrafficLight.vue'
  import ChartAllHover from '@/components/dashboardItems/ChartAllHover.vue'
  import PieChart from '@/components/dashboardItems/PieChart.vue'
  import Section from '@/components/dashboardItems/Section.vue'
  import Gauge from '@/components/dashboardItems/Gauge.vue'...    
  export default {
    name: 'HomePage',
  
    head () {
      return {
        title: "Dashboard"
      }
    },
  
    computed: {
      ...mapGetters({
        isAuthenticated: "users/isAuthentificated",
        profileName: "profiles/name",
        dashboardItems: "profiles/dashboardItems"
      })
    },
  
    mounted() {
      if (typeof this.$redrawVueMasonry === 'function') {
        this.$redrawVueMasonry()
      }
    },
  
    components: {
      OnlyValue,
      TrafficLight,
      ChartAllHover,
      PieChart,
      Section,
      Gauge
    }
  }
  </code></pre>
  
  <p>When calling a components it looks the following:</p>
  
  <pre><code>import dashboardItem from '~/mixins/dashboardItem'
  
  export default {
  name: "gauge",
  
  mixins: [dashboardItem],
  
  props: {
      connector: {
        type: String,
        required: true
      },
      type: {
          type: String,
          required: true
      },
      configuration: {
          type: Object,
          required: true
      },
      id: {
          type: Number,
          required: true
      },
      index: {
          type: Number,
          required: true
      }
    },
  
    data: () =&gt; ({
      initOptions: {
          renderer: 'svg'
      },
      options: {
        tooltip: {
          formatter: "{c}%"
        },
        series: [{
          name: null,
          type: 'gauge',
          detail: {
            formatter: '{value}%'
          },
          data: null
        }]
      },
      isLoading: true
    }),
  
    methods: {
      getData(configuration, connector) {
        this.fetchData(configuration, connector)
        setInterval(this.fetchData.bind(null, configuration, connector), configuration.refreshTime)
      },
      fetchData(configuration, connector) {
        this.getSingleValue(configuration, connector)
          .then(data =&gt; {
            this.isLoading = false
            let percent = (data.value / configuration.max) * 100
            percent = Math.round(percent * 10) / 10
            this.$nextTick(function () {
              this.$refs.gauge.mergeOptions({
                series: [{
                  name: data.title,
                  data: [{
                    value: percent,
                    name: data.title
                  }]
                }]
              })
            })
            this.$redrawVueMasonry()
          })
          .catch(e =&gt; console.log(e))
      }
    },
  
    mounted () {
      this.getData(this.configuration, this.connector)
    }
  }
  </code></pre>