Toasts do not work when used alongside vue-turbolinks after first page change

[Arns]

I'm using Vue with Vue Turbolinks and Vue Toasted. When I refresh completely, the toasts work fine. When I refresh, then switch pages one or more times, the toasts do not work. I've narrowed it down to being an issue due to running alongside vue-turbolinks. I believe turbo links replaces the

element each navigation, so perhaps that is causing issues with toasted?

Expected Behavior: Toasts show even after all turbolinks navigations

Here is my app initialization code:

import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue/dist/vue.esm'
import Toasted from 'vue-toasted'

document.addEventListener('turbolinks:load', () => {
  axios.defaults.headers.common['X-CSRF-Token'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
  axios.defaults.headers.common['Content-Type'] = 'application/json';
  axios.defaults.headers.common['Accept'] = 'application/json';

  const app = new Vue({
    el: '#vue-app',
    data: function() {
      return {
    },
    components: { 

    }
  })

  Vue.use(Toasted)

})

[Arns]

Further digging in... I find toasted uses a container element nested under

. When navigating using Vue turbolinks, the container element gets removed and never reinitialized. Turbolinks can keep elements permanent by adding an attribute - perhaps this would be a good workaround but I see no options for the container element when initializing toasted. Thoughts?