When I run this source then it showed me just

[Kakao is not defined] https://i.stack.imgur.com/UA7VI.png

My sources are like this

in 『nuxt.config.js』

export default {
  // Global page headers (https://go.nuxtjs.dev/config-head)
  head: {
    script: [
      { src: 'https://developers.kakao.com/sdk/js/kakao.js'},
    ]
  },
}

in 『./pages/login.vue』

<template>
   <a :href="loginWithKakao()">
     <img
       src="https://k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg"
       width="222"
     />
   </a>          
</template>
<script>

export default {
  data() {
    return {
      visible: true,
      account: '',
      password: '',
    }
  },
  computed: {
    ...mapState('store', { logo: (state) => state.logo }),
  },
  methods: {
    loginWithKakao() {
      Kakao.Auth.login({
        success: function (response) {
          // console.log("Kakao.Auth.login - success response ->", response);
          Kakao.API.request({
            url: '/v2/user/me',
            success: function (response) {
              console.log(response)
            },
            fail: function (error) {
              console.log(error)
            },
          })
        },
        fail: function (error) {
          console.log(error)
        },
      })
    },       
  },
  mounted(){
    // Initialize the SDK. Please set the JavaScript key for the app you want to use.
    Kakao.init('JavaScript key');

    // Determines whether to initialize the SDK.
    console.log('Kakao.isInitialized() >>', Kakao.isInitialized());
  },
}
</script>

When I used this in html, it worked

<a id="custom-login-btn" href="javascript:loginWithKakao()">
  <img
    src="https://k.kakaocdn.net/14/dn/btqCn0WEmI3/nijroPfbpCa4at5EIsjyf0/o.jpg"
    width="222"
  />
</a>

As I know, we can use href="javascript:your_function()" in html as :href="your_function()" in Vue.js

Or are there some ways something others?