How to bind elements from virtual-list to a method

Questions
1

I can not call the method when I click on the created virtual list entry. How can this be realized?

    <script>
  return {
    data: function() {
      var items = [];
      var userId = window.localStorage.getItem("userId");
      console.log(userId);
      app.request.getJSON('http://127.0.0.1:8000/api/taskRoomShow/' + userId, function(data) {
        console.log(data);
        for (var i = 0; i <= data.data.length; i++) {
          items.push({
            id: data.data[i].id,
            title: data.data[i].name,
            subtitle: "Task"
          });
        }
      });
      return {
        items: items
      };
    },
    on: {
      pageBeforeRemove: function() {
        var self = this;
        self.virtualList.destroy();
      },
      pageInit: function() {
        var self = this;
        self.virtualList = self.$app.virtualList.create({
          el: self.$el.find('.virtual-list'),
          items: self.items,
          searchAll: function(query, items) {
            var found = [];
            console.log(data);
            for (var i = 0; i < items.length; i++) {
              if (items[i].title.toLowerCase().indexOf(query.toLowerCase()) >= 0 || query.trim() === '') found.push(i);
            }
            return found;
          },
          itemTemplate: '<li>' +
            '<a href="/tasks-room/" name="button" id={{id}} @click="getId" class="item-link item-content">' +
            '<div class="item-inner">' +
            '<div class="item-title-row">' +
            '<div class="item-title">{{title}}</div>' +
            '</div>' +
            '<div class="item-subtitle">{{subtitle}}</div>' +
            '</div>' +
            '</a>' +
            '</li>',
          height: self.$theme.ios ? 63 : 73,
        });
      }
    },
    methods: {
      getId: function(){
        console.log("1");
      },
      refresh: function() {
        var router = this.$router;
        router.refreshPage()
      }
    }
  }
</script>