Slideshow is properly showed only first time, then it dissapears - vue.js

Question

I have a problem properly displaying slideshow (which is written in Jquery) when i revisit web page (via router-link)...
So if i press f5 and web page reloads, everything is working properly, but once i click on one link and i'm redirected, half of web page is blank... I belive that problem is because a lot of parts of this application is in jquery code. I bought a template and include it in to my Vuejs2 project
Example of home component
<template>
<div id="wrapper">
<HeaderComponent></HeaderComponent>
<div id="main-content">
<SlideShow></SlideShow>
</div>
<FooterComponent></FooterComponent>
</div>
</template>
<script>
import HeaderComponent from './HeaderComponent.vue'
import SlideShow from './subComponents/SlideShow.vue'
import FooterComponent from './FooterComponent.vue'
export default {
name: 'Home',
components: {
'HeaderComponent': HeaderComponent,
'SlideShow': SlideShow,
'FooterComponent': FooterComponent
}
}
</script>
Slideshow component
<template>
<div class="">
<div class="rev_slider_wrapper">
<div id="rev_slider" data-slider-layout="fullscreen" data-slider-thumbnail="true" class="rev_slider">
<ul>
<li><img src="static/img/various/bg-image.png"/></li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'SlideShow'
}
</script>
This is the slider.js included in index.html via tag
$(document).ready(function () {
// MAIN VARIABLES INITIALIZATION
var revapi;
$(window).resize(function () {
'use strict';
if ($('#rev_slider').data('slider-layout') == 'fullscreen' && $('body').hasClass('left-nav')) {
var windowHeight = $(window).height();
$('.rev_slider_wrapper, #rev_slider').height(windowHeight);
}
});
(function () {
'use strict';
slickCarousel();
setTimeout(function () {
revSlider();
owlCarousel();
}, 100);
bxSlider();
flexslider();
}());
// REVOLUTION SLIDER
function revSlider() {
if ($.fn.revolution && $('#rev_slider').length) {
var revSliderLayout = $('#rev_slider').data('slider-layout') ? $('#rev_slider').data('slider-layout') : 'auto';
var revSliderHeight = $('#rev_slider').data('gridheight') ? $('#rev_slider').data('gridheight') : [800, 800, 480, 360];
var windowHeight = $(window).height();
if ($('body').hasClass('left-nav')) {
revSliderLayout = 'auto';
if ($('#rev_slider').data('slider-layout') == 'fullscreen') {
revSliderHeight = windowHeight;
}
}
revapi = $('#rev_slider').show().revolution({
sliderType: $('#rev_slider').data('slider-type') ? $('#rev_slider').data('slider-type') : 'standard',// standard, hero, carousel
jsFileLocation: 'static/js/plugins/revolution-slider/revolution/js/',
sliderLayout: revSliderLayout, // auto, fullscreen, fullwidth
dottedOverlay: 'none',
delay: 9000,
lazyLoad: 'on',
navigation: {
keyboardNavigation: 'on',
keyboard_direction: 'horizontal',
mouseScrollNavigation: $('#rev_slider').data('nav-mouse') ? $('#rev_slider').data('nav-mouse') : 'off',
onHoverStop: 'off',
touch: {
touchenabled: 'on',
swipe_threshold: 75,
swipe_min_touches: 1,
swipe_direction: 'horizontal',
drag_block_vertical: false
},
arrows: {
style: 'zeus',
enable: $('#rev_slider').attr('data-nav-arrows') ? false : true,
hide_onmobile: false,
hide_onleave: false,
tmp: $('#rev_slider').data('slider-thumbnail') ? '<div class="tp-title-wrap"><div class="tp-arr-imgholder"></div></div>' : '<div class="tp-title-wrap"></div>',
left: {
h_align: 'left',
v_align: 'center',
h_offset: 10,
v_offset: 0
},
right: {
h_align: 'right',
v_align: 'center',
h_offset: 10,
v_offset: 0
}
},
bullets: {
enable: $('#rev_slider').attr('data-nav-bullets') ? true : false,
hide_onmobile: false,
style: 'uranus',
hide_onleave: false,
direction: 'vertical',
h_align: $('#rev_slider').data('bullets-align') ? $('#rev_slider').data('bullets-align') : 'left',
v_align: 'center',
h_offset: 30,
v_offset: 0,
space: 10,
tmp: '<span class="tp-bullet-inner"></span>'
}
},
carousel: {
maxRotation: 5,
vary_rotation: "off",
minScale: 15,
vary_scale: "off",
horizontal_align: "center",
vertical_align: "center",
fadeout: "on",
vary_fade: "on",
maxVisibleItems: 3,
infinity: "off",
space: -80,
stretch: "off"
},
responsiveLevels: $(this).data('responsive') ? $(this).data('responsive') : [1240, 1024, 778, 480],
gridwidth: $(this).data('gridwidth') ? $(this).data('gridwidth') : [1230, 1024, 767, 480],
gridheight: revSliderHeight,
lazyType: 'none',
parallax: {
type: 'mouse',
origo: 'slidertop',
speed: 2000,
levels: [2, 3, 4, 5, 6, 7, 12, 16, 10, 50],
disable_onmobile: 'on'
},
shadow: 0,
spinner: 'off',
stopLoop: 'on',
stopAfterLoops: 0,
// stopAtSlide: $('#rev_slider').data('autoplay') ? 0 : 1,
shuffle: 'off',
autoHeight: 'off',
disableProgressBar: 'on',
hideThumbsOnMobile: 'off',
hideSliderAtLimit: 0,
hideCaptionAtLimit: 0,
hideAllCaptionAtLilmit: 0,
startWithSlide: 0,
fallbacks: {
simplifyAll: 'off',
nextSlideOnWindowFocus: 'off',
disableFocusListener: 'off'
}
});
revapi.bind("revolution.slide.onbeforeswap", function (e) {
if ($('#rev_slider').data('slider-layout') == 'fullscreen' && $('body').hasClass('left-nav')) {
var windowHeight = $(window).height();
$('.rev_slider_wrapper, #rev_slider').height(windowHeight);
}
});
revapi.bind('revolution.slide.onchange', function (event, data) {
var logoImg = $('#logo a img');
var logoLight = $('#logo a').data('logo-light');
var logoDark = $('#logo a').data('logo-dark');
var currentSlide = data.slideIndex;
if (revapi.find('li').eq(data.slideIndex - 1).attr('data-color') === 'dark') {
$('body').addClass('transparent-dark');
logoImg.attr('src', logoDark);
}
if (revapi.find('li').eq(data.slideIndex - 1).attr('data-color') === 'light') {
$('body').removeClass('transparent-dark');
logoImg.attr('src', logoLight);
}
});
$('body').on('click', '[data-go-to-slide]', function () {
var goToSlide = $(this).data('go-to-slide');
revapi.revshowslide(goToSlide);
return false;
});
setTimeout(function () {
revapi.revredraw();
}, 400);
}
}
});
So how to properly reinitialise, reload, do something with this slideshow, so it will be re rendered when i visit page via .
If you need any additional informations please let me know and i will provide. Thank you!

Answer 1

i managed to solve it by calling Jquery function in mounted function
example:
export default {
name: 'SlideShow',
methods: {
},
mounted: function () {
// initial start of slide show
revSlider();
}
}
And this is example how my external sliders.js script looks like
// MAIN VARIABLES INITIALIZATION
var revapi;
$(window).resize(function () {
'use strict';
if ($('#rev_slider').data('slider-layout') == 'fullscreen' && $('body').hasClass('left-nav')) {
var windowHeight = $(window).height();
$('.rev_slider_wrapper, #rev_slider').height(windowHeight);
}
});
(function () {
'use strict';
setTimeout(function () {
revSlider();
}, 1000);
}());
stopAtSlide:1
// REVOLUTION SLIDER
function revSlider() {
if ($.fn.revolution && $('#rev_slider').length) {
var revSliderLayout = $('#rev_slider').data('slider-layout') ? $('#rev_slider').data('slider-layout') : 'auto';
......