Nested Components about vue-introjs HOT 2 CLOSED

watch: {
    myVar: { 
        handler: function(){
            /* only start the tour once the actual elements have finished dynamically loading in the DOM */
            /* otherwise, introJS does not have any elements to actually bind to, or gets the positions wrong */
            this.$nextTick(() => {    
                /* dynamically load my steps */
                this.$intro().addSteps(
                    [
                        {
                            intro: "Step 1",
                            element: this.$refs.step_1,
                            position: "right",
                            disableInteraction: true // don't let the user click inside of the highlighted element
                        },
                        {
                            intro: "Step 2",
                            element: this.$refs.step_2,
                            position: "left",
                            disableInteraction: true
                        },
                        {
                            intro: "Step 3",
                            element: this.$refs.step_3_parent.$refs.step3_child_element,
                            position: "right",
                            disableInteraction: true
                        }
                    ]
                )
                .setOptions({
                    exitOnOverlayClick: false, // don't let the user click "out" of the tour to exit
                    overlayOpacity: 0.5 // changed to 0.5 felt it was too dark by default
                })
                .start() // start the tour
                .oncomplete(function () { // callback tour completion
                    console.log("done");
                })
                .onexit(function () {
                    console.log("exited"); // callback tour exit
                });
            });
        },
        deep: true,
        immediate: false // don't load the tour right away
    }