How to implement Standalone popup autocomplete searchbar in F7+Vuejs (Version 5) Not working


I am trying to implement the standalone autocomplete search bar as seen on the kitchen sink source code here

I installed with framework7-vuejs-CLI version 5.x, although the kitchen sink code is running on F7 v2.3.0 and vuejs 2.5.x.

The issue I am facing is that no action is called when i click on the link to initiate the process. Here’s my implementation below.

<div class="list">
            <div class="block-header">Popup Autocomplete</div>
                    <a href="#" id="autocomplete-standalone-popup" class="item-link item-content autocomplete-opener">
                        <input type="hidden"/>
                        <div class="item-inner">
                            <div class="item-title">Favorite Fruite</div>
                            <div class="item-after"></div>

Then, the js part is thus;

     export default {
        data() {
            return {
                fruits: 'Apple Apricot Avocado Banana Melon Orange Peach Pear Pineapple'.split(' '),
        on: {
            pageBeforeRemove() {
                const self = this;
            pageInit() {
                const self = this;
                const app = self.$f7;
                const fruits = self.fruits;
                const $ = self.$$;

                self.autocompleteStandalonePopup = app.autocomplete.create({
                    openIn: 'popup', // open in page
                    openerEl: '#autocomplete-standalone-popup', // link that opens autocomplete
                    closeOnSelect: true, // go back after we select something
                    source(query, render) {
                        const results = [];
                        if (query.length === 0) {
                        // Find matched items
                        for (let i = 0; i < fruits.length; i += 1) {
                            if (fruits[i].toLowerCase().indexOf(query.toLowerCase()) >= 0) results.push(fruits[i]);
                        // Render items by passing array with result items
                    on: {
                        change(value) {
                            // Add item text value to item-after
                            // Add item value to input value

Can someone advice me on how to go about this please, thanks.