Now I created the component using Javascript and here I added the answer.

I declared google as a global variable in app.d.ts

// See https://kit.svelte.dev/docs/types#app
    // for information about these interfaces
    declare global {
        const google: any;
        namespace App {
        }
    }
export {};

let canvas: any; //Created a variable to optain a reference to rendered div element
    

In onMount


onMount(async () => {   
    google.accounts.id.initialize({
                client_id: "534101779287-bm07dc8v4ln4kulqbql61nsglcku74vg.apps.googleusercontent.com",
                ux_mode: "redirect",
                context: "use",
                login_uri: "http://localhost:5173/auth/callback"
            });
            google.accounts.id.renderButton(canvas, {
                width: '220',      
                theme: 'outline',
                size: 'large',
                type: 'standard',
                text: 'signin_with',
                shape: 'rectangular',
                logo_alignment: 'left',
                  
            });

    });
This code will work in initial render, hard reload (Command shift R) and reload (Command R)

When using SvelteKit, hard reloading is rendered server-side. The code might be incompatible with this or be executed in the wrong order.

Check the console for errors and move the code that must run on the client to onMount. You can also use ssr Page Options Turn off server-side rendering for specific pages as a last resort.