How to load Jquery plugin/script when Vue router changes page?

Question

I've looked around on here for answers and none of the already supplied ones work for me.

here is a working demo codepen.io/figaro/pen/mBvWJa

My project is simple, a one pager with Vue to handle the page routing. I have some jQuery based content on each different page. When I first load a page, the jQuery plugin displays fine. But when I navigate to other pages, the jQuery plugin does not get reloaded. I've tried every since hook I can think of...mounted, beforeRouteEnter, beforeRouteLeave, updated etc and none of them work. I've tried using this.$nextTick(function () {} and that does not work either.

The jQuery plugin is slick carousel. Yes I know there is an official vue slick wrapper for this, but I am not using the CLI....my project just has vue and vue router attached through a CDN and I don't understand how to use it with how my project is set up (their examples are for single file components). I don't care if the solution is hacky or not best practice, I just need to make Vue load the slick initializer script on each page. I saw examples to make a directive or component but they don't make sense to me since they are assuming you are using single file components which I am not. Is there any way to do this?

main.js 

  const NotFoundPage = {
  name: "NotFoundPage",
  template: "#404-template"
};

const routes = [
  { path: "/", component: Industry },
  { path: "/about", component: My Page },
  { path: "/contact", component: About},
  { path: "*", component: NotFoundPage }
];

const router = new VueRouter({
  routes
});

new Vue({
  router,
  template: "#root-template",
  mounted: function() {
    this.$nextTick(function () {
    })
  },
  beforeRouteUpdate ( to, from , next ) {
    this.$nextTick(function () {
    })
  },
  ready: function() {
    this.$nextTick(function () {
    })
  },
  updated () {
  }
}).$mount("#app");

html

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

 <template id="root-template">
 ...stuff

<view-router></view-router>

</template>

 <template id="industry"></template> etc

jquery script

$('.gallery-responsive').slick({
  infinite: true,
  speed: 300,
  slidesToShow: 3,
  draggable: true,
  edgeFriction: 0.30,
  slidesToScroll: 1,
  responsive: [{
    breakpoint: 1100,
    settings: {
          slidesToShow: 2,
          slidesToScroll: 1
    }
}, {
    breakpoint: 900,
    settings: {
          slidesToShow: 2,
          slidesToScroll: 1
    }
}, {
    breakpoint: 800,
    settings: {
      slidesToShow: 1,
      slidesToScroll: 1,
      dots: false,
      arrows: false,
    }
}
]

});

here is a working demo codepen.io/figaro/pen/mBvWJa

Answer 1

I tried your demo and fixed it (check updated pen here) by using next.

beforeRouteEnter(to, from, next) {
  next(vm => {
    $(".single-item").slick({
      dots: true
    });
  })
}

The problem is that you tried to use slick before html elements in the component are completely established. In contrast, next is invoked on the end of the navigation resolution flow.