vuetify jest button trigger does not work even with spy

starting to learn how vuejs and jest would work. watched some videos then started trying it myself but kept on failing with the trigger click.

I have a login button in my component, this is the only v-btn I have inside the component

      <v-card-actions>
        <v-btn
            block
            :disabled="!valid"
            color="info"
            class="mr-4"
            @click.native="on_login"
        >
          Login
        </v-btn>
      </v-card-actions>

in my login.spec.js

import { mount, shallowMount } from '@vue/test-utils';
import Login from "@/views/Login";
import { createLocalVue } from '@vue/test-utils'
import Vuetify from "vuetify";
const localVue = createLocalVue()
localVue.use(Vuetify);


describe('Login.vue', () => {
    it('contain login', () => {
        const wrapper = mount(Login);
        expect(wrapper.html()).toContain('login');
    });

    it('login event', async () => {
        const wrapper = mount(Login, {
            localVue
        });

        const spy_on_login = jest.spyOn(wrapper.vm, 'on_login');

        const button = wrapper.find('.v-btn');

        expect(button.exists()).toBeTruthy();

        await button.trigger('click');  // also tried click.native
        // I even tried using wrapper.vm.nexttick, vue.nexttick but  none worked
        expect(spy_on_login).toHaveBeenCalled();
    });
});

I didn't add localVue and Vuetify to start with because Vuetify is actually in the test/unit/setup.js

being new with this, I am not sure where to start debugging the reason trigger isn't working as the button does exist

Thanks in advance for any suggestions, advises as I read through few stackoverflow and tried their methods but none worked :(