Memory leak in vue-i18n when v-media-query is present

vue & vue-i18n & v-media-query

2.5.21, 8.6.0, 1.0.3

Issue

vue-i18n does not handle memory properly in presence of the v-media-query library.

It seems that when components that load i18n texts are deleted, the loaded texts are not properly wiped from memory. As a result, the app usage more and more memory (especially when components are toggled by v-ifs) and the slower the app gets over time.

Steps to reproduce

I haven’t used JSFiddle or a similar tool because the use of an iframe masks Vue’s memory usage.

main.js

import Vue from 'vue'
import VueI18n from 'vue-i18n'
import VueMediaQuery from 'v-media-query'

Vue.use(VueI18n)
Vue.use(VueMediaQuery)

const i18n = new VueI18n({locale: 'en'})

const ComponentWithI18n = {
  i18n: {
    messages: {
      en: {
        'text': 'translation'
      }
    }
  },
  template: `<div>{{ $t('text') }}</div>`,
}

const App = {
  template: `<div>
    <button @click="show = !show">Toggle</button>
    <div v-if="show">
      <component-with-i18n v-for="i in 10" :key="i" />
    </div>
  </div>`,

  data () {
    return {
      show: true,
    }
  },

  components: {
    ComponentWithI18n
  },
}

new Vue({
  i18n,
  render: h => h(App),
}).$mount('#app')

index.html

<div id="app"></div>

Watch the memory usage increase

• serve this app in a dev environment (I used vue-cli 3.x)
• in Chrome devtools, use the Memory tab to take a heap snapshot
• search Vue in the snapshot’s summary and write the number of Vue constructors down
• click on the toggle button to hide then show the list once
• take another snapshot and write the number of Vue constructors down again: it has doubled
• hide/show the list once more, take another snapshot: Vue constructors has increased again

Watch the memory usage go back to normal

• comment/remove the v-media-query library import and use from the code
• serve this app in a dev environment (I used vue-cli 3.x)
• take a snapshot, hide/show the list, take another snapshot: Vue constructors remains stable the same

What is expected?

Component loaded translations are removed from memory when the component is destroyed whether v-media-query is present or not.

What is actually happening?

Component loaded translations are not removed from memory when a component is destroyed when v-media-query is present.

[kazupon]

Wait until Vue 2.6 is released.

[tvld]

I think I have same issue with Vuetify and Vue-i18n although in Nuxt. Memory goes out of bound after a while. What’s the status on this one? Still solved with 2.6 ?