Update Vue example with Composition API

[jiblett1000]

Hello,

I had a working implementation using vue composition API, but after trying to add in the debounce function (along with the pwned matcher & useLevenshteinDistance), can't seem to get it working again. Seeing as how composition API is the predominant API for Vue now, it would be extremely helpful to have an example using it. Thanks for any assistance with this and thanks for the great work!

P.S. Using async function like current Vue example in docs.

[jiblett1000]

I've now got a working debounce implementation, however there is another error when using the pwned matcher. The console error is:

haveIBeenPwned.ts:33 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'digest')

[MrWook]

It's working fine on my end in nuxt3. Like i mentioned in https://github.com/zxcvbn-ts/zxcvbn/issues/171 i moved the options code into a plugin but the execution is working fine

<template>
  <div class="example">
    <label>
      Password
      <input v-model="password" type="text" />
    </label>
    <template v-if="result">
      <div>
        The password score is {{result.score}}/4
      </div>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { zxcvbnAsync, debounce, ZxcvbnResult } from '@zxcvbn-ts/core'
import { Ref, watch } from "@vue/runtime-core";

let password = ref('')
let result: Ref<ZxcvbnResult | null> = ref(null)

const useZxcvbn = async () => {
  if (password) {
    result.value = await zxcvbnAsync(password.value)
  } else {
    result.value = null
  }
}

const zxcvbnDebounce = debounce(useZxcvbn, 200, false)

watch(password, zxcvbnDebounce)

</script>

Edit: It's working in server side rendering and on the client