Dynamically updating issue-term prop not reloading the comment data.

[CodyBontecou]

I'm working with something like the code below, and am finding the VueUtterance component is not reflecting the new repo when the route changes.

Any ideas why this may be happening?

<script setup>
import { ref, useRoute, watch } from 'vue'

const route = useRoute()
const currentRoute = ref(route)

watch(route, (newRoute, oldRoute) => {
  currentRoute.value = newRoute.path
})
</script>

<template>
  <Layout>
    <template #doc-after>
      <SimpleNewsletter />
      <VueUtterance
        repo="CodyBontecou/blog"
        theme="github-dark"
        :issue-term="currentRoute.value"
      />
    </template>
  </Layout>
</template>

[CodyBontecou]

I looked into the source and saw how you manage the script attributes within mounted. For my use case, I am using the route path to dictate the issue-term, so I was able to solve this with the following component:

<template>
  <section ref="comments"></section>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRoute } from 'vitepress'

const comments = ref('')
const route = useRoute()

watch(route, (newRoute, _) => {
  createUtteranceScriptElement(newRoute.path)
})

onMounted(() => {
  createUtteranceScriptElement(route.path)
})

function createUtteranceScriptElement(path) {
  const script = document.createElement('script')

  script.setAttribute('src', 'https://utteranc.es/client.js')
  script.setAttribute('repo', 'codybontecou/blog')
  script.setAttribute('issue-term', route.path)
  script.setAttribute('label', 'Comments')
  script.setAttribute('theme', 'github-dark')
  script.setAttribute('crossorigin', 'anonymous')
  script.setAttribute('async', true)

  comments.value.innerHTML = ''
  comments.value.appendChild(script)
}
</script>

I'm unsure what you can do to make the component reactive using watchers and the props, but maybe this code can help you.