How to Crop image and then start the upload with nuxt js?

This is a really cool library. But after integrating it with my nuxt js app i am having hard time finding a solution to crop an image and then upload. Shown on the example Profile Picture Code

I have gone throw some of the documentation and its a lot to read. Here is my set up:

<client-only>
             <file-pond
               name="test"
               ref="pond"
               label-idle="Drop files here..."
               :allow-multiple="true"
               allowImagePreview="true"
               allowImageTransform="true"
               accepted-file-types="image/jpeg, image/png"
               :server="{ processFiles }"
               :files="myFiles"
               image-crop-aspect-ratio="1"
               allowImageCrop="true"
               v-on:init="handleFilePondInit"/>
           </client-only>

import vueFilePond, { setOptions } from 'vue-filepond';
import 'filepond/dist/filepond.min.css';
import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
import FilePondPluginImageCrop from 'filepond-plugin-image-crop';
import FilePondPluginImageTransform from 'filepond-plugin-image-transform';

const FilePond = vueFilePond(
  FilePondPluginFileValidateType,
  FilePondPluginImagePreview,
  FilePondPluginImageCrop,
  FilePondPluginImageTransform
);
export default {
      name: "vue-file-pond",
    data() {
      return {
        myFiles: []
      };
    },
    methods: {
      handleFilePondInit: function() {
        console.log('FilePond has initialized');
      },
      processFiles(filename, file, metadata, load){
        load(file);
      }
    },
    components: {
      FilePond
    },
    mounted() {
      setOptions({
        server: {
          url: process.env.APP_URL + '/api/images',
          revert: null,
          process: {
            withCredentials: false,
            headers: {
              Authorization: 'Bearer ABCD'
            }
          },
        }
      });
    }
  }