Carousel never pauses timer with autoplay and no pause hover

[rclement]

Overview of the problem

Buefy version: 0.8.9
Vuejs version: 2.6.11
Nuxtjs version: 2.11.0
OS/Browser: Firefox, Chrome

Description

Using the Carousel component with autoplay=true and pause-hover=false, moving to another page (thus destroying the instantiated Carousel component in the previous page) does not pause the Carousel timer and still tries to access the animation items:

TypeError: this.carouselItems[this.activeItem] is undefined

The issue seems to be coming from Carousel.vue#L241

Steps to reproduce

1. A minimum example of Carousel usage in a Nuxt.js page named index.vue:

<template>
  <b-carousel
    :indicator="false"
    :arrow="false"
    :pause-hover="false"
    :pause-info="false"
    :interval="2000"
    animated="fade"
  >
    <b-carousel-item v-for="(carousel, index) in carousels" :key="index">
      <figure class="image is-128x128 is-inline-block">
        <img
          :src="`/svg/${carousel}.svg`"
          :alt="carousel"
        />
      </figure>
    </b-carousel-item>
  </b-carousel>

  <nuxt-link to="/contact">
    <b-button>Contact</b-button>
  </nuxt-link>
</template>

<script>
export default {
  data() {
    return {
      carousels: [
        'image1',
        'image2',
        'image3'
      ]
    }
  }
}
</script>

2. Another basic Nuxt.js page named contact.vue:

<template>
  <div>
    <h1>Contact</h1>
  </div>
</template>

3. Display the index page and click on the "Contact" link to trigger the issue in the console

Expected behavior

The Carousel component pauses the timer when destroyed, whatever its configuration.

Actual behavior

The Carousel component does not pauses the timer when destroyed, with the configuration autoplay=true and pause-hover=false.