How to handle complete event in Vue 2?

[vito-gmi]

Hello :)

I am looking for a way to handle the complete event in Vue 2. I am using "vue-shepherd": "3.0.0", and using it as follows:

<script>
	import { useShepherd } from 'vue-shepherd'
	import 'shepherd.js/dist/css/shepherd.css'

	export default {
		name: 'ShepherdGuide',
		data() {
			return {
				tour: null
			}
		},
		created() {
			this.createTour()
		},
		mounted() {
			setTimeout(() => {
				this.tour.start()
			}, 500)
		},
		methods: {
			createTour() {
				this.tour = useShepherd({
					useModalOverlay: true,
					defaultStepOptions: {
						classes: 'shadow-md bg-purple-dark shepherd-theme-custom',
						scrollTo: true,
						// modalOverlayOpeningRadius: 4,
						when: {
							show() {
								console.log('---hit show')
								console.log('curr step: ', this.tour.currentStep)
							},
							hide() {
								console.log('---hit hide')
							},
							back() {
								console.log('--- hit back')
							},
							next() {
								console.log('--- hit next')
							},
							cancel() {
								console.log('--- hit cancel')
							},
							complete() {
								console.log('--- hit complete')
							},
							start() {
								console.log('--- hit start')
							},
							active() {
								console.log('--- hit active')
							},
							inactive() {
								console.log('--- hit inactive')
							},
							done() {
								console.log('--- hit done')
							}
						},
						cancelIcon: {
							enabled: true,
							label: 'Testing description'
						}
					}
				})

				this.tour.addSteps([
					{
						id: 'step-1',
						title: 'Step 1 title',
						text: 'Testing Shepherd tour - first step',
						attachTo: { element: '.tour-guide-1', on: 'right' },
						buttons: [
							{
								text: 'Next',
								action: this.tour.next
							}
						]
					},
					{
						id: 'step-2',
						title: 'Step 2 title',
						text: 'Testing Shepherd tour - second step',
						attachTo: { element: '.tour-guide-2', on: 'right' },
						buttons: [
							{
								text: 'Prev',
								action: this.tour.back
							},
							{
								text: 'Next',
								action: this.tour.next
							}
						]
					},
					{
						id: 'step-3',
						title: 'Step 3 title',
						text: 'Testing Shepherd tour - last step',
						attachTo: { element: '.tour-guide-3', on: 'right' },
						buttons: [
							{
								text: 'Prev',
								action: this.tour.back
							},
							{
								text: 'Finish',
								action: this.tour.complete
							}
						]
					}
				])
			},
		}
	}
</script>

In this case, when I use the this.tour.complete, it doesn't fire up the complete event, thus, it doesn't print the message in the console. If I make the finish button to use this.tour.hide action, it successfully hits the method and shows the message in the console. Unfortunately, that is not what I want, because it hits hide every time I go to the next step, thus, I will have to make some additional checks if that is the last step or not.

Am I doing something wrong or I have to use the hide event to handle the Finish button in the last step ?