jQuery scrollToTop button not working in Nuxt.js?

I want to create a scrollToTop button using jQuery in Nuxt.js the jQuery is installed well everything is good but my code it's not working it didn't show any error in console but when I clicked to button nothing is happen?

nuxt.config.js

const webpack = require('webpack');

export default {
  ssr: false,
  target: 'static',
  head: {
    title: process.env.npm_package_name,
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    script: [
      { src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js' },
    ]
  },
  plugins: ['~plugins/main.js'],
  build: {
    plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery'
      })
    ]
  }
}

main.js

jQuery(function($) {
    'use strict';
    
    $(window).on('scroll', function() {
        if ($(this).scrollTop() > 300) {
            $('.scrollUp-btn').addClass("show");
        } else {
            $('.scrollUp-btn').removeClass("show");
        }
    });
    
    $('.scrollUp-btn').click(function() {
        $('html, body').animate({ scrollTop: "0" },  1000);
    });

}(jQuery));