How to get Ajax form submit working in vue file? receiving an error Uncaught Reference Error: xhr is not defined

Questions
1

In the following vue file when I click on the submit button I am receiving the following error:
Uncaught Reference Error: xhr is not defined
the form is not getting submitted. Also please help me with how to use the commented code in the export default in the following example code.

Thanks in advance for the help. Here is the code.

<template>
      <f7-page>
        <f7-navbar title="About F7" back-link="Back" sliding></f7-navbar>
        <f7-block-title>Welcome to Framework7</f7-block-title>
        <f7-block strong>
          <form action="http://api.slim.ib/api/postform" method="GET" class="form-ajax-submit">
              <f7-input type="text" placeholder="Enter Main Category" clear-button></f7-input>
              <input type="submit" class="button" value="Button">
          </form>
        </f7-block>
      </f7-page>
    </template>
    <script>
     export default {
    $$('form.form-ajax-submit').on('formajax:success', function (e) {
      var xhr = e.detail.xhr; // actual XHR object

      var data = e.detail.data; // Ajax response from action file
      // do something with response data
    }); 
      };
    </script>