Использование $ ref в Vue и JQuery

Question

Я использую Vue и JQuery в проекте, над которым я работаю.Я знаю, что это не лучшее совпадение, но у меня нет другого выбора (нет библиотеки Vue, которая делает то, что мне нужно).В любом случае, я пытаюсь создать организационную диаграмму, в которой есть прослушиватель событий узла щелчка.Я создал следующий метод:

clickNode: function($node, data) {
    $node.on('click', function() {
        this.node = data;
        $(".showsubtree").show();
    });
}

Он должен открывать модальный при щелчке узла.Когда я щелкаю узел, он просто выводит на консоль следующее сообщение:

jQuery.fn.init [prevObject: jQuery.fn.init(1)]

Если библиотека была написана на Vue, метод должен был выглядеть примерно так:

clickNode: function(node, data) {
    node.addEventListener('click',() => {
        this.node = data;
        this.$refs.showsubtree.show();
    })
},

В разделе шаблонов я использую:

<showsubtree ref="showsubtree" :ps-data="node" :closed="closeModal"></showsubtree>

Обратите внимание, что я изменил ref на class в первом фрагменте кода, чтобы $.(".showsubtree") работал.Я думаю, что проблема заключается в использовании $ref, потому что с этим он будет работать, но когда я переключаюсь на библиотеку JQuery, она не работает.Если $ref действительно является ключом к решению этой проблемы, какое ключевое слово мне следует использовать в JQuery, чтобы заменить $ref?Если нет, что может помочь решить эту проблему?Основная цель - открыть модальное окно при нажатии на определенный узел в дереве.