Using HanziWriter library show weird issue on second slide

[kryptoniancode]

Describe the bug

I have created a minimal two page slide, adding hanziwriter in second slide make it not working, but putting it on first slide working.

Here not working means, the shown svg for characters is not working properly when added to second slide.

Minimal reproduction

Steps to reproduce the behavior:

1. Create a new project
2. Paste following to create two page slide, add to slides.md file

---
theme: seriph
title: Demo Slide Bug
class: text-center
transition: slide-left
mdc: true
---

# Slide 1

---

# Slide 2

<div id="stroke-order"></div>

<script setup>
import { onMounted, watch } from 'vue'
import { useSlideContext } from '@slidev/client'
import HanziWriter from 'hanzi-writer'

let writer

function initWriter() {
  if (writer) {
    writer.hideCharacter()
    writer = null
  }
  writer = HanziWriter.create('stroke-order', '本', {
    width: 200,
    height: 200,
    padding: 5,
    showOutline: true,
    showCharacter: false,
    strokeWidth: 2,
  })
  writer.loopCharacterAnimation();
}

onMounted(() => {
  initWriter()
})
</script>

3. Install npm package

npm i
npm install hanzi-writer

4. See the errorYou can use https://sli.dev/new to create a new project to reproduce the issue.

But when reload the slide 2, then it is working, but when slide start from first slide, or next slide it is shown like above, following image is correct way to show, even when coming from previous or next slide

Environment

• Slidev version: 52.1.0
• Browser: Chrome
• OS: mac

[kermanx]

How about adding preload: false?

---
preload: false
---

# Slide 2

<div id="stroke-order"></div>