Cfrgtkky

Hi I use turbolinks 5 and vue js with webpacker
When I go to link turbolinks load only some content of my components , but other not work . This happens when I go back and go to link again.

Any help.

This is my code of my vue js

import Vue from 'vue/dist/vue.esm';

import SilabusApp from 'components/silabus/app';

import VeeValidate from 'vee-validate';

import BootstrapVue from 'bootstrap-vue';

import 'bootstrap-vue/dist/bootstrap-vue.css';



import Autocomplete from 'v-autocomplete'

// You need a specific loader for CSS files like https://github.com/webpack/css-loader

import 'v-autocomplete/dist/v-autocomplete.css'



import TurbolinksAdapter from 'vue-turbolinks';



// Configuracion de validaciones en español

const VueValidationEs = require('vee-validate/dist/locale/es');

Vue.use(VeeValidate,{

    locale: 'es',

    dictionary: {

      es: VueValidationEs

    }

});



Vue.use(Autocomplete);

Vue.use(BootstrapVue);

Vue.use(TurbolinksAdapter);



document.addEventListener('turbolinks:load', () => {



var element= document.getElementById("silabus-app-view");

  if (element!=null) {

    var vueapp = new Vue({ el: element,

    components: {  'silabus-app-view': SilabusApp}  });

  }

});

And in my html.erb

<div id="silabus-app-view">



  <silabus-app-view 

    :read_only_silabus = false 

    id_syllabus_program="<%= params[:id] %>" 

    ref="first"

    url_to_be_approve="<%= send_to_approve_syllabus_path(params[:id]) %>"

    state_syllabus="<%= @syllabus_program.state %>" >

  </silabus-app-view>



</div>



<%= stylesheet_pack_tag 'silabus/app' %>

<%= javascript_pack_tag 'silabus/app' %>

If I disable link turbolinks this components load correclty but this refresh all page.