This is an working example of khalti checkout client withi vuejs

App.vue

<template>
  <div id="app">
    <h2> Khalti  {{msg }}</h2>
    <button v-on:click="publish">Pay With </button>

    <p></p>
  </div>
</template>

<script>
import * as KhaltiCheckout from 'khalti-web';

export default {


  name: 'app',
  data(){
    return{
      msg: "Checkout",
      config: {
        publicKey: "test_public_key_65cec6a7008a4f6c8d2dc53e60ffa157",
        productIdentity: "1234567890",
        productName: "Drogon",
        productUrl: "http://gameofthrones.com/buy/Dragons"
      }
    };
  },
  methods: {
    onSuccess (payload) {
        // hit merchant api for initiating verfication
        console.log(payload);
    },
    onError (error) {
        // handle errors
        console.log(error);
    },
    onClose () {
        console.log('widget is closing');
    },
    publish: function () {
    console.log(this.config)
    this.checkout = new KhaltiCheckout({
    publicKey: this.config.publicKey,
    productIdentity: this.config.productIdentity,
    productName: this.config.productName,
    productUrl: this.config.productUrl,
    eventHandler: {
      onSuccess: this.onSuccess,
      onError: this.onError,
      onClose: this.onClose
    }
    });
    console.log(this.checkout, "inmethod");
    this.checkout.show({amount: 1000})
    }
  }
  }
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>