Vue实现Google登录，并自动渲染Google按钮

我使用的使用JavaScript方式，哪里需要登录按钮写哪里

Index.vue文件如下

<template>
    <div class="Container">
        <!-- 谷歌登录 -->
        <div class="g_id_signin" id="g_id_signin"></div>
    </div>
</template>
<script>
    import { GOOGLE_CLIENT_ID } from '@/util/ConstantData'
    import * as api from '@/api/login'
    export default {
        name: "login",
        data() {
            return {
            	// 这个是Gooogle客户端的cilent_Id:*****.com
                GOOGLE_CLIENT_ID: GOOGLE_CLIENT_ID
            }
        },
        created() {
        	// 使用谷歌登录的api
            const script = document.createElement("script");
            script.src = "https://accounts.google.com/gsi/client"
            document.body.appendChild(script);

            window.addEventListener('load', () => {
                window.google.accounts.id.initialize({
                   // 主要就是填写client_id
                    client_id: GOOGLE_CLIENT_ID,
                    auto_select: false,
                    callback: this.handleCredentialResponse,
                });
                // 设置按钮的样式等
                window.google.accounts.id.renderButton(
                    document.getElementById("g_id_signin"),
                    {
                        theme: "filled_blue",
                        size: 'large',
                        // width:'320',
                        type: 'standard',
                        text: 'signin_with'
                    }
                );
            })
        },
        methods: {
            async handleCredentialResponse(response) {
                // 获取回调响应的凭证数据 然后拿这个凭证给后台，后台jwt进行解析获取登录信息
                let code = response.credential
                await api.googleLogin(code);
            },
        }
    }
</script>
<style scoped>
</style>

效果如下

这个是api文档

https://developers.google.cn/identity/gsi/web/reference/js-reference?hl=en